React Router 6介绍

React Router 6

一、概述

1、React Router 以三个不同的包发布到npm上

复制代码

1.1 react-router: 路由核心库,提供了很多组件钩子
1.2 react-router-dom: 包含react-router所有内容,并添加一些专门用于DOM组件,例如<BrowserRouter>
1.3 react-router-native: 包括react-router所有内容,并添加一些专门用于react native的API,例如<NativeRouter>

2、与React Router 5.x版本对比

复制代码

2.1 内置组件变化: 移除<Switch>,新增<Routes>
2.2 语法变化: component={About} 变为 element={About}
2.3 新增多个hook: useParams、useNavigate、useMatch
2.4 官方明确推荐函数式组件

二、Component

1、BrowserRouter和HashRouter

复制代码

1.1 BrowserRouter用于包裹整个应用
1.2 HashRouter作用域BrowserRouter一样,但修改的事地址栏的hash值
1.3 备注: 6.x版本中BrowserRouter、HashRouter与5.x相同

2、Routes与Route

复制代码

2.1 Routes与Route要配合使用,且必须要用Routes包裹Route
2.2 Route相当于一个if语句,如果其路径与当前URL匹配,则呈现其对应组件
2.3 <Route caseSensitive />, caseSensitive属性用于指定匹配时是否区分大小写,默认为false
2.4 当URL发生变化时,Routes都会查看其所有子Route元素,以找到最佳匹配并呈现组件
2.5 Route也可以嵌套使用,且配合useRoutes配置路由表,但需要通过<Outlet />组件来渲染其子路由

javascript 复制代码

<Routes>
	// path属性用于定义路径,element属性用于定义当前路径所对应钻
	<Route path="/home" element={<Home />} />
	// 用于嵌套路由
	<Route path="/about" element={<About />}>
			<Route path="test1" element={<Test1 />}>
			...
	</Route>
</Routes>

3、Link和NavLink

1、作用: 实现路由导航链接,其中NavLink可实现高亮效果

2、语法

javascript 复制代码

<NavLink to="home" className={{isActive => isActive ? 'light' : ''}}>
</NavLink>

4、Navigate

1、作用: 只要Navigate组件被渲染,就会修改路径,切换视图

2、replace属性用于控制跳转模式,其中push为路由压栈,replace为路由替换,默认为push

5、Outlet

作用: 当Route产生嵌套时,渲染其对应的后续子路由

三、Hooks

1、useRoutes

复制代码

1.1 作用: 根据路由表,动态创建Routes和Route
1.2 语法

javascript 复制代码

const element = useRoutes(routes)
// 注册路由
{element}

2、useNavigate

复制代码

2.1 作用: 返回一个函数用来实现编程式路由导航
2.2 语法

javascript 复制代码

const navigate = useNavigate()
// 指定具体路径
navigate('/home', {replace: false, state: {name: 'tom', age: 18}})
// 传入数值进行前进/后退,类似于5.x的history.go方法
navigate(1)

3、useParams

复制代码

3.1 作用: 返回当前匹配路由的params参数,类似于5.x的match、params
3.2 语法

javascript 复制代码

const {id} = useParams()

4、useSearchParams

复制代码

4.1 作用: 用于读取和修改当前位置URL中查询字符串,返回一个包含两个值的数组,内容分别为当前search参数(**URLSearchParam类型,内置JS类**),另一个为更新search的函数
4.2 语法

javascript 复制代码

const [search, setSearch] = useSearchParams()
const id = search.get('id')
const title = search.get('title')

5、useLocation

复制代码

5.1 作用: 获取当前location信息,对标5.x中路由组件location属性
5.2 语法

javascript 复制代码

const location = useLocation()

6、useMatch

复制代码

6.1 作用: 返回当前匹配信息,对标5.x中路由组件match属性
6.2 语法

javascript 复制代码

const match = useMatch()

7、useInRouterContext

复制代码

7.1 作用: 如果组件在Router的上下文中呈现,则useInRouterContext钩子返回true,否则返回false

8、useNavigateType

复制代码

8.1 作用: 返回当前导航类型,即用户是如何来到当前页面
8.2 返回值: POP(指用户在浏览器中直接打开这个路由组件/刷新页面)、PUSH、REPLACR

9、useOutlet

复制代码

9.1 作用: 用来呈现当前组件中要渲染的嵌套路由
9.2 如果嵌套路由没有挂载返回null,已挂载则展示当前嵌套路由对象

10、useResolvedPath

作用: 给定一个URL值,解析其中path、search、hash值