React路由6

react-router-dom(6.3)是react路由的新版本,与之前的路由5有较大的改动;

下载指令:npm i react-router-dom@6.3 --save

1.react-router-dom 6版本适用于函数式组件,部分逻辑api更倾向于react hook;

2.react-router-dom 6的新特性:

    2.1 没有了component和render属性,都用element属性代替,值写成标签形式;

    2.2 所有的Route组件必须要被Routes组件包裹;

    2.3 路由嵌套代码更加集中,语法更简单; - 只需要封装一个tsx文件即可;

    2.4 该插件内存减少,由之前的20kb减少到8kb;

    2.5 路由传值的获取语法,全部更改为hook语法;-钩子函数处理;

    2.6 新增Navigate组件代替之前路由5版本中的Redirect组件;

    2.7 可以使用组件NavLink跳转;

    2.8 路由6传值的方式有三种:params,search,state;

    2.9 路由6中的编程式路由跳转,通过Hook语法实现;-钩子

    * 路由6和路由5中使用懒加载lazy是完全相同的;

关掉严格模式！！！

 

二级及以下路由设置出口

利用Outlet设置出口位置

 

 

useOutlet 作用:用来呈现当前组件中要渲染的嵌套路由信息对象