React router v6写法总结

相对v5的变化
使用前需要 包裹根节点

 <BrowserRouter>
      <RootRouter/>
 </BrowserRouter>

Routes

1.Route需要用Routes包裹
2.组件用element表示
3.路由内有嵌套需要加*

<Routes>
     <Route path='/datatable/*'element={<Datatable/>} />
     <Route path='/schedule/*'element={<Datatable/>}/>
</Routes>

同时，子级路由的path前缀不需要加上父级的path，/为根目录。

Navigate

1.相比v5，删除Redirect改为Navigate，作用同为重定向
2.useNavigate代替userHistory和withRouter 作用为编程式导航
不管是否为路由组件，都可以使用

 <Route path="/" element={<Navigate to="/datatable" />} />

const navigate = useNavigate();   //注意要写在函数组件内，否则会报错 
navigate(-1); //后退
navigate('/index')
navigate('/',
{
	replace: //默认为false,
	state:
})

userParams

获取路由上传的的参数

path="home:/id:/data:"
to="home/1/'abcd'";
const {id,data} = userParams()

userRouters

注册路由表
可以把所有路由写在一个文件下

 const element=useRoutes([
   {
     path:"home",
     element:<HomePage/>
   },
 ])

使用{element}，作用等同于RoutesRoute等组件…

Outlet

占位组件，为嵌套路由占位

<Outlet/>   //可以使用useOutlet查看嵌套路由对象