React Router 6 路由基础

注册路由

一般写法

路由必须用 Routes 包裹，从上往下，匹配到第一个后不再匹配

路由表写法

1. 在 src/routers/index.js 定义路由数组
   此处用了 Navigate 组件，当 Navigate 组件渲染时，会跳转到对应 path，渲染该 path 的组件，相当于 5 版本的 Redirect
   
2. 在 App.jsx 引入路由数组，并用 useRouters 生成路由规则
   
3. 在 App.jsx 放置路由规则
   

嵌套路由

1. 在路由数组父路由对象中添加 children 路由数组
   子路由可使用相对路径
   
2. 在路由组件要呈现的位置放置 Outlet 组件
   

NavLink

1. 6 版本的 NavLink 被激活时默认追加 active 类名，可实现激活样式。自定义追加类名需通过函数实现
   
2. 点击子 NavLink 时，如需取消父 NavLink 的激活状态，需加入 end 属性
   

React Router 5 路由基础