乐趣区

关于react.js:reactrouter-v6新特性总结

jiezi

因为之前的我的项目始终应用的是 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/

退出移动版