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>