16 【react-router 6】

16 【react-router 6】

关于路由的知识已在11 【react-router 5】中进行说明，这里主要是对于5版本的api的变换说明

1.概述

官方文档：Home v6.4.1 | React RouterReact Router 以三个不同的包发布到 npm 上，它们分别为：

1. 1. react-router: 路由的核心库，提供了很多的：组件、钩子。
   2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等 。
   3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:等。

2. 与React Router 5.x 版本相比，改变了什么？

   1. 内置组件的变化：移除 ，新增 等。

   2. 语法的变化：component={About} 变为 element={}等。

   3. 新增多个hook：useParams、useNavigate、useMatch等。

   4. 官方明确推荐函数式组件了！！！

      …

安装

npm install react-router-dom@6
1

2.BrowserRouter和HashRouter

在 React Router 中，最外层的 API 通常就是用 BrowserRouter。BrowserRouter 的内部实现是用了 history 这个库和 React Context 来实现的，所以当你的用户前进后退时，history 这个库会记住用户的历史记录，这样需要跳转时可以直接操作。

BrowserRouter 使用时，通常用来包住其它需要路由的组件，所以通常会需要在你的应用的最外层用它，比如如下

import ReactDOM from 'react-dom'
import * as React from 'react'
import {
    BrowserRouter } from 'react-router-dom'
import App from './App`

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
, document.getElementById('app))
1
2
3
4
5
6
7
8
9
10
11

1. 说明：作用与一样，但修改的是地址栏的hash值。
2. 备注：6.x版本中、 的用法与 5.x 相同。

3.Routes 与 Route

1. v6版本中移出了先前的，引入了新的替代者：。

2. 和 要配合使用，且必须要用包裹。

3. 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

4. 属性用于指定：匹配时是否区分大小写（默认为 false）。

5. 当URL发生变化时， 都会查看其所有子 元素以找到最佳匹配并呈现组件 。

6. 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。

Route

Route 用来定义一个访问路径与 React 组件之间的关系。比如说，如果你希望用户访问 https://your_site.com/about 的时候加载 这个 React 页面，那么你就需要用 Route:

} />
1

Routes

Routes 是用来包住路由访问路径(Route)的。它决定用户在浏览器中输入的路径到对应加载什么 React 组件，因此绝大多数情况下，Routes 的唯一作用是用来包住一系列的 Route，比如如下

import { Routes, Route } from "react-router-dom";

function App() {
  return (
    
      } />
      } />
    
  );
}
1
2
3
4
5
6
7
8
9
10

在这里，Routes 告诉了 React Router 每当用户访问根地址时，加载 Home 这个页面，而当用户访问 /about 时，就加载 页面。

完整代码

    /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/
    }>

		/*用于定义嵌套路由，home是一级路由，对应的路径/home*/
    }>
       /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
      }>
      }>
	
	
		//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
    
       } />
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.React Router 实操案例

首先我们建起几个页面

<Home />

<About />

<Dashboard />
1
2
3
4
5

Home 用于展示一个简单的导航列表，About用于展示关于页，而 Dashboard 则需要用户登录以后才可以访问。