第40节——路由初识，定义路由组件

文档地址
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、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 组件所定义的路径匹配时，该组件就会被渲染到页面上

常用属性

属性名	类型	默认值	描述
path	string		用于匹配 URL 的路径。
element	ReactNode		指定路由匹配成功后要渲染的组件。
caseSensitive	boolean	false	指定路径匹配时是否区分大小写。
sensitive	boolean	false	指定路径匹配时是否严格匹配大小写和斜杠。
location	string \| object		指定要匹配的位置。
navigate	boolean	true	当路由匹配成功后是否进行页面导航。
elementProps	object		传递给渲染组件的属性对象。
preload	function		用于预加载组件。
caseSensitive	boolean	false	指定路径匹配时是否区分大小写。
sensitive	boolean	false	指定路径匹配时是否严格匹配大小写和斜杠。
redirectTo	string		当路由匹配成功后要重定向到的路径。
redirectPath	string		当路由匹配成功后要重定向到的路径。
replace	boolean	false	当页面导航时是否使用 replace 而非 push。
caseSensitive	boolean	false	指定路径匹配时是否区分大小写。
sensitive	boolean	false	指定路径匹配时是否严格匹配大小写和斜杠。
preventDefault	boolean	false	是否阻止默认的页面导航行为。
when	boolean \| func	true	指定条件是否匹配，用于控制是否进行页面导航。
className	string		为路由渲染的元素指定 CSS 类名。
style	object		为路由渲染的元素指定样式对象。
title	string		页面标题，用于在路由变化时更新页面标题。
meta	any

例子

import { Route, Routes } from 'react-router-dom';function App() {return (<div><Routes><Route exact path="/" element={Home} /><Route path="/about" element={About} /></Routes></div>);
}

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 (<Routes><Route exact path="/" element={Home} /><Route path="/about" element={About} /></Routes>);
}

4、Link组件

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

import { Link } from 'react-router-dom';function Home() {return (<div><ul><li><Link to="/a">A页面</Link></li><li><Link to="/b">B页面</Link></li></ul></div>);
}

5、NavLink

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

import { NavLink } from 'react-router-dom';/**
当点击链接的时候会自动激活activeClassName属性的className
*/
function Navbar() {return (<nav><ul><li><NavLink to="/a" activeClassName="active">a页面</NavLink></li><li><NavLink to="/b" activeClassName="active">b页面</NavLink></li></ul></nav>);
}

6、Redirect

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

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

import { Route, Routes, Redirect } from 'react-router-dom';
import Dashboard from './Dashboard';function App() {return (<Routes><Route path="/dashboard" element={<Dashboard />} /><Route path="/home" element={<Redirect to="/dashboard" />} /></Routes>);
}

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 (<div><h1>这是应用程序的头部</h1>{/* 在这里渲染子路由组件 */}{outlet}<h1>这是应用程序的底部</h1></div>);
}

路由定义嵌套路由

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /><Route path="/users" element={<Users />}>{/* 子路由 */}<Route path="/" element={<UserList />} /><Route path=":id" element={<UserProfile />} /></Route></Routes></Router>);
}

6、useRoutes

根据规则动态渲染路由。

注意：

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

import { useRoutes } from 'react-router-dom';function App() {const routes = useRoutes([{ path: '/', element: <Home /> },{ path: '/about', element: <About /> },{ path: '/contact', element: <Contact /> },{ path: '/users/:id', element: <User /> },]);return <div>{routes}</div>;
}

六、基本使用

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 (// 首先确定什么模式，那么最上层组件就是用这个模式<HashRouter><Routes><Route path="/" element={<APage />} /><Route path="/b" element={<BPage />} /><Route path="/b" element={<CPage />}></Route></Routes></HashRouter>);
}

3、在入口文件处引入

import React from "react";
import ReactDOM from "react-dom/client";
import RouterComponent from "./rotuerComponent";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(<RouterComponent />
);