react-router v6新特性总结

由于之前的项目一直使用的是V5版本，最新新建项目的时候，默认使用的是V6版本，根据官方的介绍，V6版本的新特性如下。

新特性

重命名为；
的新特性变更；
嵌套路由变得更简单；
新钩子useRoutes代替react-router-config；
用useNavigate代替useHistory；
Link不再支持component 属性；
NavLink的exact属性替换为end
大小减少：从20kb到8kb

重命名为

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

/* v5 */

  
   } />


/* V6 */

  } />
  } />

同时，组件还修改了如下一些内容：

废弃exact
component/render被element替代
routeProps可以在element中直接获取
简化的路径匹配，仅支持动态:id样式参数和*通配符，不再支持RegExp

支持嵌套路由

在V6版本中，标签支持嵌套，可以在一个文件内配置嵌套路由，便于统一管理路由。

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 (
   
     
       } />
       } />
       {/* 嵌套路由场景：需要在Bar（父路由的组件）声明Outlet组件，用于渲染子路由 */}
       }>
         } />
       
     
   
 )
}
export default App

Outlet

在嵌套路由场景，我们需要在父路由中使用Outlet组件，用于渲染子路由。

import { Outlet } from 'react-router-dom'
function Bar() {
  return (
    
      Bar
      {/* 有嵌套路由的场景需要使用 */}
      
    
  )
}
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: 
    },
    {
      path: 'foo',
      element: 
    },
    {
      path: 'bar',
      element: ,
      children: [
        {
          path: ':id',
          element: 
        }
      ]
    }
  ])
  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(
  
    
      
    
  ,
  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/