React ~ React Router 6

React Router 6 VS React Router 5.x

1. 内置组件的变化; 移除<Switch /> , 新增<Routes />
2. 语法的变化; component = { About } 变为 element = { <About /> }
3. 新增多个hook
4. 官方明确推荐函数式组件了!

一级路由(变化)

1. 安装路由 npm i react-router-dom (默认是最新版本)
2. 路由链接用NavLink(高亮)来导航, 并通过to属性来进行跳转操作
3. 呈现路由的时候,需要注册路由 实用Routes代替了Switch; Switch当时写了是涉及到了一个匹配效率的问题,匹配到了就不会继续往下匹配,之前是一定要写

componen = { About } 变为 element = { <About /> } 

重定向 Navigate(变化)

• 作用; 只要<Navigate> 组件被渲染,就会修改路径,切换视图
• replace属性用于控制跳转模式, (push 或 replace, 默认是push)
  规则

{/* 注册路由 */}
<Routes><Route path="/ABOUT" element={<About/>}/><Route path="/home" element={<Home/>}/><Route path="/" element={<Navigate to="/about"/>}/>
</Routes>

NavLink高亮(变化)

你要想自定义类名,需要把className写成一个函数的形式

• 较长的时候,抽出一个函数

function computedClassName({isActive}){return isActive ? 'list-group-item atguigu' : 'list-group-item'
}
// 在路由中使用高亮的自定义属性
<div className="col-xs-2 col-xs-offset-2"><div className="list-group">{/* 路由链接 */}<NavLink className={computedClassName} to="/about">About</NavLink><NavLink className={computedClassName} to="/home">Home</NavLink></div>
</div>

useRoutes路由表

• 将之前那一堆抽取出去, 使用hooks来处理

export default [{path:'/about',element:<About/>},{path:'/home',element:<Home/>},{path:'/',element:<Navigate to="/about"/>}
]
// 引入上述代码, 然后使用hooks
const element = useRoutes(routes)
// 使用路由表
<div className="panel-body">{/* 注册路由 */}{element}
</div>

嵌套路由

• 直接在路由表中加上相应的children属性, 用于相关操作

export default [{path:'/about',element:<About/>},{path:'/home',element:<Home/>,children:[{// 注意; 子级路由不用加上斜杠path:'news',element:<News/>},{path:'message',element:<Message/>}]},{path:'/',element:<Navigate to="/about"/>}
]

• 使用Outlet来指定路由呈现的位置

<div><h2>Home组件内容</h2><div><ul className="nav nav-tabs"><li>{/* 书写子级路由的时候不需要传参 */}<NavLink className="list-group-item" to="news">News</NavLink></li><li><NavLink className="list-group-item" to="message">Message</NavLink></li></ul>{/* 指定路由组件呈现的位置 */}<Outlet /></div>
</div>