文档地址
http://www.reactrouter.cn/docs/getting-started/tutorial

version

V6.x

一、什么是路由

前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。

前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。例如，当用户点击一个链接时，前端路由会将URL解析为一个路由路径，然后根据路径匹配相应的组件或页面并显示在页面上，而不需要向服务器发起请求。

前端路由可以提高Web应用的性能和用户体验，因为它允许应用实现快速的页面切换和动态的内容加载，同时减少了服务器的负载。

二、安装

// 注意：我们用的是6.x的版本
npm install react-router-dom
1
2

三、路由模式

1、HashRouter

HashRouter使用URL的哈希部分（即#后面的部分）来匹配路由，它不会向服务器发送请求。例如，URL可以是http://example.com/#/about。HashRouter兼容性比较好，哪怕浏览器不支持HTML5 History API也可以正常使用。

2、BrowserRouter

BrowserRouter使用HTML5 History API来匹配路由，使用 HTML5 的 pushState 和 replaceState API 来实现路由的切换。它可以隐藏URL中的#符号，使URL更加友好。例如，URL可以是http://example.com/about

3、MemoryRouter

MemoryRouter是一个不依赖于浏览器历史记录的路由器。它将URL存储在内存中，而不是浏览器历史记录中，适用于测试或在不支持HTML5 History API的环境中使用

4、StaticRouter

StaticRouter是一个用于服务器端渲染的路由器。它将请求的URL作为参数传递给组件，并将组件的输出发送回客户端。这样就可以在服务器端生成动态HTML，然后将其发送到浏览器。

5、NativeRouter

NativeRouter是用于React Native应用的路由器，它使用Native导航而不是HTML导航来匹配路由

接下来我们以HashRouter模式为例进行我们的路由学习

四、react-router-dom 有哪些组件

1、HashRouter组件以及其他路由模式组件

用于创建一个路由容器，使得我们可以在浏览器中使用路由。它包裹整个应用程序，并提供了一个路由的上下文环境。

2、Route组件

用于将一个路由路径与一个组件进行映射。当浏览器 URL 与 Route 组件所定义的路径匹配时，该组件就会被渲染到页面上

常用属性

例子

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

function App() {
  return (
    

      
        
      	
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12

3、Routes组件

Routes 组件是 React Router v6 中的一个组件，它的作用是用于定义应用程序的路由规则。与 React Router v5 中的 组件类似，Routes 组件包含多个 子组件，用于指定不同的路径和对应的组件。

Routes 组件可以让我们更加灵活地定义路由规则。与 React Router v5 中的 组件只能按顺序匹配第一个符合条件的路由不同，Routes 组件可以匹配多个路由，并根据 path 属性的优先级选择最匹配的路由。例如，如果同时定义了 /users/:id 和 /users/new 两个路由规则，当访问 /users/new 时，React Router v6 会选择匹配优先级更高的 /users/new 路由，而不是直接匹配第一个符合条件的路由

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

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

4、Link组件

用于创建一个链接，使得用户可以通过点击链接来访问应用程序的不同路由路径。它会生成一个 标签，并根据传入的 to 属性生成正确的 href 属性。

import { Link } from 'react-router-dom';

function Home() {
  return (
    

        

          

            A页面
          
          

            B页面
          
        
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5、NavLink

与 类似，也用于创建一个链接，但它会在当前路由匹配成功时添加一个指定的类名，以便样式上的区分。

import { NavLink } from 'react-router-dom';

/**
当点击链接的时候会自动激活activeClassName属性的className
*/
function Navbar() {
  return (
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

6、Redirect

用于重定向用户到另一个路由路径。当用户访问当前路径时，会自动跳转到指定的路径。

在使用Redirect组件时，您需要在路由配置中使用它而不是在组件中使用它。例如，如果您想在用户访问/home时重定向到/dashboard，则可以像这样设置路由

import { Route, Routes, Redirect } from 'react-router-dom';
import Dashboard from './Dashboard';

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

7、Prompt

用于在用户离开当前页面之前提示用户。可以用来防止用户在填写表单时误操作导致数据丢失。

五、react-router-dom中常用的hooks

1、useNavigate

用于在组件中进行导航、跳转等操作，与 useHistory 功能类似，但提供了更丰富的 API，例如可以使用命名路由进行跳转。

所谓的命名理由就是Route组件上定义的name属性，然后在跳转的时候直接穿name即可。

2、useParams

用于获取 URL 中的参数，例如 /users/:id 中的 id

3、useLocation

用于访问当前页面的位置信息，包括 URL 中的路径、查询参数、哈希等。

4、useMatch

用于获取当前页面的匹配信息，例如路由规则中的路径、参数等，与 useRouteMatch 功能类似

5、useOutlet

用于在父组件中呈现子路由组件，可以将子路由组件放在特定位置。也就是展示嵌套路由。

import { useOutlet } from 'react-router-dom';

function App() {
  const outlet = useOutlet();

  return (
    

      
这是应用程序的头部
      {/* 在这里渲染子路由组件 */}
      {outlet}
      
这是应用程序的底部
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

路由定义嵌套路由

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    
      
        } />
        } />
        }>
          {/* 子路由 */}
          } />
          } />
        
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

6、useRoutes

根据规则动态渲染路由。

注意：

在使用 useRoutes 钩子函数时，需要将其作为根组件渲染，而不是将其作为子组件嵌套在其他组件中。这是因为 useRoutes 钩子函数需要访问 react-router-dom 的上下文，从而能够进行路由匹配和导航操作。

import { useRoutes } from 'react-router-dom';

function App() {
  const routes = useRoutes([
    { path: '/', element:  },
    { path: '/about', element:  },
    { path: '/contact', element:  },
    { path: '/users/:id', element:  },
  ]);

  return 
{routes}
;
}
1
2
3
4
5
6
7
8
9
10
11
12

六、基本使用

1、创建a、b、c三个组件文件，内容任意

2、创建router-component.jsx文件

/**
 * 从react-router-dom中 引用HashRouter 是一个组件
 * 如果需要别的模式那就引入其他模式
 *
 */
import React from "react";
import { HashRouter, Route, Routes } from "react-router-dom";
import APage from "./learn-router/a";
import BPage from "./learn-router/b";
import CPage from "./learn-router/c";

export default function RouterComponent() {
  return (
    // 首先确定什么模式，那么最上层组件就是用这个模式
    
      
        } />
        } />
        }>
      
    
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

3、在入口文件处引入

import React from "react";
import ReactDOM from "react-dom/client";
import RouterComponent from "./rotuerComponent";


const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  
);
1
2
3
4
5
6
7
8
9
10

4、在url地址直接输入地址就可以切换不同的页面

http://localhost:3000/

http://localhost:3000/#/b

http://localhost:3000/#/c