React ~ React Router 6

React Router 6 VS React Router 5.x

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

一级路由(变化)

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

componen = { About } 变为 element = {  } 

重定向 Navigate(变化)

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

{/* 注册路由 */}

	}/>
	}/>
	}/>

NavLink高亮(变化)

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

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

function computedClassName({isActive}){
	return isActive ? 'list-group-item atguigu' : 'list-group-item'
}
// 在路由中使用高亮的自定义属性

	

		{/* 路由链接 */}
		About
		Home
	

useRoutes路由表

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

export default [
	{
		path:'/about',
		element:
	},
	{
		path:'/home',
		element:
	},
	{
		path:'/',
		element:
	}
]
// 引入上述代码, 然后使用hooks
const element = useRoutes(routes)
// 使用路由表

	{/* 注册路由 */}
	{element}

嵌套路由

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

export default [
	{
		path:'/about',
		element:
	},
	{
		path:'/home',
		element:,
		children:[
			{
				// 注意; 子级路由不用加上斜杠
				path:'news',
				element:
			},
			{
				path:'message',
				element:
			}
		]
	},
	{
		path:'/',
		element:
	}
]

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

	
Home组件内容
	

		

			

			    {/* 书写子级路由的时候不需要传参 */}
				News
			
			

				Message
			
		
		{/* 指定路由组件呈现的位置 */}