react-router-dom6文档 https://reactrouter.com/en/main

image.png

react-router-dom v6新特性

  1. 重命名为
  2. 的新特性变更
  3. 嵌套路由变得更简单
  4. element 代替 component，render函数
  5. 用 useNavigate代替 useHistory
  6. 新钩子 useRoutes代替 react-router-config
  7. 打包体积减少：从20kb到8kb
  8. 删除 Prompt，usePrompt， useBlock
  9. 父路由渲染子路由， 代替 rops.children
  10. 组件 props 里能拿到的 location、history、match 等信息，现在可通过 useRouteData() 获取，好处：减少了 props 的传递

react-router-dom API

BrowserRouter，基于 history.pushState，history.replaceState，需要服务端配置
HashRouter，先拼接 /#，再拼接路径，基于 location.hash, location.replace

  1. const keys = [
  2.   "BrowserRouter", 
  3.   "HashRouter", /#
  4.   "Link", a 链接
  5.   "MemoryRouter",
  6.   "NavLink",
  7.   "Navigate",
  8.   "NavigationType",
  9.   "Outlet",
  10.   "Route",
  11.   "Router",
  12.   "Routes",
  13.   "UNSAFE_LocationContext",
  14.   "UNSAFE_NavigationContext",
  15.   "UNSAFE_RouteContext",
  16.   "createPath",
  17.   "createRoutesFromChildren",
  18.   "createSearchParams",
  19.   "generatePath",
  20.   "matchPath",
  21.   "matchRoutes",
  22.   "parsePath",
  23.   "renderMatches",
  24.   "resolvePath",
  25.   "unstable_HistoryRouter",
  26.   "useHref",
  27.   "useInRouterContext",
  28.   "useLinkClickHandler",
  29.   "useLocation",
  30.   "useMatch",
  31.   "useNavigate",
  32.   "useNavigationType",
  33.   "useOutlet",
  34.   "useOutletContext",
  35.   "useParams",
  36.   "useResolvedPath",
  37.   "useRoutes",
  38.   "useSearchParams"
  39. ]

react-router-dom

  1. import {
  2.   createBrowserRouter,
  3.   RouterProvider,
  4. } from "react-router-dom"
  5. import routes from './routes'
  7. const router = createBrowserRouter(routes, {
  8.   // basename: pkg.name,
  9.   // basename?: string;
  10.   // hydrationData?: HydrationState;
  11.   // window?: Window;
  12. });
  14. function RouterConfig() {
  15.   return (
  16.     <ConfigProvider locale={locale}>
  17.       <RouterProvider
  18.         router={router}
  19.         // fallbackElement?: React.ReactNode;
  20.       />
  21.     </ConfigProvider>
  22.   )
  23. }
  25. export default RouterConfig

Routes 代替 Switch

Routes代替 Switch，其他功能都一样

  1. import List from './List';
  3. <Routes>
  4.     <Route path='/' element={<Home />} />
  5.   <Route path='/list' element={<List />} />
  6. </Routes>
  8. // v5
  9. <Switch>
  10.     <Route path='/' element={<Home />} />
  11.   <Route path='/list' element={<List />} />
  12. </Switch>