A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere. DocsGitHubDiscord What to expect from this version: Non-breaking Upgrading from v6 to v7 is a non-breaking upgrade. Keep using React Router the same way you already do. ...
React Router是一个用于构建单页应用的路由库,它帮助我们管理应用程序中不同URL路径与页面组件之间的映射关系。react-router v6是React Router的最新版本,在v6中,确...
The react-router-dom, @remix-run/react, @remix-run/server-runtime, and @remix-run/router have been collapsed into the react-router package To ease migration, react-router-dom is still published in v7 as a re-export of everything from react-router The @remix-run/cloudflare-pages and @...
Route, Switch, Redirect } from 'react-router-dom'; import { AuthContext } from './context/AuthContext'; import Login from './components/Login'; import ProtectedRoute from './components/ProtectedRoute'; import Home from './components/Home'; const App = () => { return ( <Router...
// 文档:https://v5.reactrouter.com/core/api/Prompt <Prompt when={boolean} // 组件何时激活 message={(location, action) => { // 做一些拦截操作 location 要前往的路由,此时可以先保存下来后续使用 // return false 取消跳转 比如此时弹起一个自定义弹窗, ...
Pulling an example straight from the v5 to v6 migration guide, a v6 app might look something like this: import { BrowserRouter, Routes, Route, Link } from 'react-router-dom' function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="us...
// app.tsx import * as Sentry from '@sentry/react'; import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes); const App = () => ( <BrowserRouter> <SentryRoutes> <Route element={Edit...
import * as React from "react"; import * as ReactDOM from "react-dom/client"; import { createBrowserRouter, RouterProvider, } from "react-router-dom"; import "./index.css"; const router = createBrowserRouter([ { path: "/", element: Hello world!, }, ]); ReactDOM.createRoot(docum...
Documentation for v6 can be foundon our website. Contributing There are many different ways to contribute to React Router's development. If you're interested, check outour contributing guidelinesto learn how you can get involved. Packages
import { useHistory } from "react-router-dom"; function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( Go home ); } useLocationThe useLocation hook returns the location object ...