react-router v6新特性

官网文档： https://reactrouterdotcom.fly.dev/

新特性

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

重命名为

/* v5 */

  
   } />

/* V6 */

  } />
  } />

的新特性变更:

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

嵌套路由

1.支持相对路径
2. 标签支持嵌套，可以在一个文件内配置嵌套路由，便于统一管理路由
3.结合新API Outlet实现嵌套路由

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

新API：Outlet

注意：嵌套路由场景，需要在父路由的组件（Bar）使用Outlet组件，用于渲染子路由

import { Outlet } from 'react-router-dom'
function Bar() {
  return (
    

      
Bar
      {/* 有嵌套路由的场景需要使用 */}
      
    
  )
}
export default Bar

嵌套路由可配置化：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组件，否则会报错
（可以理解为，useRoutes返回的相当于Routes标签下的内容）

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/
https://blog.csdn.net/weixin_40906515/article/details/104957712
https://zhuanlan.zhihu.com/p/434128579
https://juejin.cn/post/7025418839454122015