因为之前的我的项目始终应用的是V5版本，最新新建我的项目的时候，默认应用的是V6版本，依据官网的介绍，V6版本的新个性如下。

新个性

  • <Switch>重命名为<Routes>；
  • <Route>的新个性变更；
  • 嵌套路由变得更简略；
  • 新钩子useRoutes代替react-router-config；
  • 用useNavigate代替useHistory；
  • Link不再反对component 属性；
  • NavLink的exact属性替换为end
  • 大小缩小：从20kb到8kb

<Switch>重命名为<Routes>

在V6版本中，<Switch>组件被替换成<Routes>组件，同时，component属性被element属性替换。

/* v5 */<Switch>  <Route exact path="/" component={Home} />  <Route path="/user/:id" render={(routeProps) => <User id={routeProps.match.params.id} />} /></Switch>/* V6 */<Routes>  <Route path="/" element={<Home />} />  <Route path="user/:id" element={<User id={id} />} /></Routes>

同时，<Route>组件还批改了如下一些内容：

  • 废除exact
  • component/render被element代替
  • routeProps能够在element中间接获取
  • 简化的门路匹配，仅反对动静:id款式参数和*通配符，不再反对RegExp

反对嵌套路由

在V6版本中， <Route>标签反对嵌套，能够在一个文件内配置嵌套路由，便于对立治理路由。

import { HashRouter as Router, Routes, Route } from 'react-router-dom'import Home from '@/pages/demo/Home'import Foo from '@/pages/demo/Foo'import Bar from '@/pages/demo/Bar'import BarDetail from '@/pages/demo/BarDetail'import '@/assets/style/App.css'function App() { return (   <Router>     <Routes>       <Route path="/" element={<Home />} />       <Route path="foo" element={<Foo />} />       {/* 嵌套路由场景：须要在Bar（父路由的组件）申明Outlet组件，用于渲染子路由 */}       <Route path="bar" element={<Bar />}>         <Route path=":id" element={<BarDetail />} />       </Route>     </Routes>   </Router> )}export default App

Outlet

在嵌套路由场景，咱们须要在父路由中应用Outlet组件，用于渲染子路由。

import { Outlet } from 'react-router-dom'function Bar() {  return (    <div>      <div>Bar</div>      {/* 有嵌套路由的场景须要应用 */}      <Outlet />    </div>  )}export default Bar

嵌套路由可配置化

在V6版本中，咱们能够应用useRoutes代替react-router-config配置。如果须要用到嵌套路由，那么Outlet组件也是必要的。

import { useRoutes } from 'react-router-dom'import Home from '@/pages/demo/Home'import Foo from '@/pages/demo/Foo'import Bar from '@/pages/demo/Bar'import BarDetail from '@/pages/demo/BarDetail'import '@/assets/style/App.css'function App() {  let element = useRoutes([    {      path: '/',      element: <Home />    },    {      path: 'foo',      element: <Foo />    },    {      path: 'bar',      element: <Bar />,      children: [        {          path: ':id',          element: <BarDetail />        }      ]    }  ])  return element}export default App

须要留神的是，如果是应用此形式注册路由配置，须要在入口文件增加Router包裹App组件，否则会报错。

import React from 'react'import ReactDOM from 'react-dom'import { HashRouter as Router } from 'react-router-dom'import App from '@/App'import '@/assets/style/index.css'ReactDOM.render(  <React.StrictMode>    <Router>      <App />    </Router>  </React.StrictMode>,  document.getElementById('root'))

useNavigate代替useHistory

/* v5 */const history = useHistory()history.push('/home')history.replace('/home')history.goBack()history.goForward()history.go(2)/* V6 */const navigate = useNavigate()navigate('/home')navigate('/home', {replace: true})navigate(-1)navigate(1)navigate(2)

参考阐明：https://reactrouterdotcom.fly.dev/