由于之前的项目一直使用V5版本，最新新建的项目默认使用V6版本。据官方介绍，V6版本新增功能如下。新特性更名为；的新特性改变了；嵌套路由变得更简单；新的钩子useRoutes取代了react-router-config；将useHistory替换为useNavigate；Link不再支持组件属性；NavLinkexact属性替换为end大小缩减：从20kb到8kb更名为在V6版本中，组件被组件替换，组件属性被替换通过元素属性。/*v5*/}/>/*V6*/}/>}/>同时组件也修改了如下内容：将废弃的exactcomponent/render替换为元素routeProps可以直接获取简化元素中的路径匹配，只支持dynamic:id样式参数和*通配符，不再支持RegExp。支持嵌套路由。在V6版本中，标签支持嵌套。可以在一个文件中配置嵌套路由，方便路由的统一管理。import{HashRouterasRouter,Routes,Route}from'react-router-dom'importHomefrom'@/pages/demo/Home'importFoofrom'@/pages/demo/Foo'importBarfrom'@/pages/demo/Bar'importBarDetailfrom'@/pages/demo/BarDetail'import'@/assets/style/App.css'functionApp(){return(}/>}/>{/*嵌套路由场景：需要在Bar（父路由的组件）中声明Outlet组件来渲染子Route*/}}>}/>)}exportdefaultAppOutlet在嵌套路由场景下，我们需要使用父路由中的Outlet组件来渲染子路由。import{Outlet}from'react-router-dom'functionBar(){return()}exportdefaultBar嵌套路由在V6版本可以配置，我们可以使用useRoutes代替react-router-config配置。如果需要使用嵌套路由，Outlet组件也是必须的。从'react-router-dom'导入{useRoutes}从'@/pages/demo/Home'导入主页从'@/pages/demo/Foo'导入Foo'从'@/pages/demo/Bar'导入Bar'导入BarDetailfrom'@/pages/demo/BarDetail'import'@/assets/style/App.css'functionApp(){letelement=useRoutes([{path:'/',element:},{path:'foo',element:},{path:'bar',element:,children:[{path:':id',element:}]}])返回element}exportdefaultApp需要注意的是，如果使用该方法注册路由配置，需要在入口文件中添加RouterpackageApp组件，否则会报错。从'react'导入React从'react-dom'导入ReactDOM从'react-router-dom'导入{HashRouterasRouter}从'@/App'导入'@/assets/style/index.css'ReactDOM。render(,document.getElementById('root'))useNavigate替代useHistory/*v5*/consthistory=useHistory()history.push('/home')history.replace('/home')history.goBack()history.goForward()history.go(2)/*V6*/constnavigate=useNavigate()navigate('/home')navigate('/home',{replace:true})navigate(-1)navigate(1)navigate(2)参考说明：https://reactrouterdotcom.fly.dev/
