React学习笔记(五)路由_react historychange-优快云博客

本文链接：https://blog.youkuaiyun.com/kianagrow/article/details/128277574

本文介绍了React中的路由概念，从后端路由阶段到前端路由的演变，重点讲解了React Router的使用，包括BrowserRouter、HashRouter、Route、Link、NavLink、Navigate、Not Found页面配置、路由嵌套以及手动路由跳转等。同时，文中还提到了动态路由参数传递和路由配置文件的组织方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 认识路由

路由其实是网络工程中的一个术语：

在架构一个网络时，非常重要的两个设备就是路由器和交换机。
事实上，路由器主要维护的是一个映射表；
映射表会决定数据的流向；

路由的概念在软件工程中出现，最早是在后端路由中实现的，原因是 web 的发展主要经历了这样一些阶段：

后端路由阶段；
前后端分离阶段；
单页面富应用（SPA）；

1.1 后端路由阶段

早期的网站开发整个 HTML 页面是由服务器来渲染的.

服务器直接生成渲染好对应的 HTML 页面, 返回给客户端进行展示.

但是, 一个网站, 这么多页面服务器如何处理呢?

一个页面有自己对应的网址, 也就是URL；
URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个 Controller 进行处理；
Controller 进行各种处理, 最终生成 HTML 或者数据, 返回给前端.

上面的这种操作, 就是后端路由：

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户端.
这种情况下渲染好的页面, 不需要单独加载任何的 js 和 css, 可以直接交给浏览器展示, 这样也有利于SEO的优化.

后端路由的缺点:

一种情况是整个页面的模块由后端人员来编写和维护的；
另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码；
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情；

1.2 前后端分离阶段

前端渲染的理解：

每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括 HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染；
需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件；
同时可以看到，和之前的后端路由不同，这时后端只是负责提供API了；

前后端分离阶段：

随着 Ajax 的出现, 有了前后端分离的开发模式；
后端只提供API来返回数据，前端通过Ajax获取数据，并且可以通过JavaScript 将数据渲染到页面中；
这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；
并且当 移动端(iOS/Android) 出现后，后端不需要进行任何处理，依然使用之前的一套API即可；
目前比较少的网站采用这种模式开发；

单页面富应用阶段:

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
也就是前端来维护一套路由规则

前端路由的核心是什么呢？改变URL，但是页面不进行整体的刷新。

1.3 URL的hash

前端路由是如何做到URL和内容进行映射呢？监听URL的改变。

URL的hash

URL的hash也就是锚点(#), 本质上是改变 window.location 的 href 属性；
我们可以通过直接赋值 location.hash 来改变 href, 但是页面不发生刷新；

<div id="app">
  <a href="#/home">home</a>
  <a href="#/about">about</a>
  <div class="router-view"></div>
</div>
<script>
  // 1. 获取 router-view 元素
  const routerViewEl = document.querySelector('.router-view')
  // 2. 监听 hashchange
  window.addEventListener("hashchange",function(){
    switch(location.hash){
      case '#/home':
        routerViewEl.innerHTML = 'home';
        break;
      case '#/about':
        routerViewEl.innerHTML = 'about'
        break;
      default:
        routerViewEl.innerHTML = 'default'
    }
  })
</script>

hash 的优势就是兼容性更好，在老版 IE 中都可以运行，但是缺陷是有一个 # ，显得不像一个真实的路径。

1.4 HTML5 的 History

history 接口是 HTML5 新增的, 它有六种模式改变URL而不刷新页面：

replaceState：替换原来的路径；
pushState：使用新的路径；
popState：路径的回退；
go：向前或向后改变路径；
forward：向前改变路径；
back：向后改变路径；

<div id="app">
  <a href="#/home">home</a>
  <a href="#/about">about</a>
  <div class="router-view"></div>
</div>
<script>
  // 1. 获取 router-view 元素
  const routerViewEl = document.querySelector(".router-view");
  // 2. 监听 所有 a 元素 的 click
  const aEls = document.getElementsByTagName("a");
  for (let aEl of aEls) {
    aEl.addEventListener("click", (e) => {
      e.preventDefault();
      const href = aEl.getAttribute("href");
      history.pushState({}, "", href);
      historyChange();
    });
  }
  // 3. 监听 popstate 和 go 操作
  window.addEventListener("popstate", historyChange);
  window.addEventListener("go", historyChange);
  // 4. 执行设置页面操作
  function historyChange() {
    switch (location.hash) {
      case "#/home":
        routerViewEl.innerHTML = "home";
        break;
      case "#/about":
        routerViewEl.innerHTML = "about";
        break;
      default:
        routerViewEl.innerHTML = "default";
    }
  }
</script>

2. 认识 react-router

目前前端流行的三大框架, 都有自己的路由实现:

Angular 的 ngRouter
React 的 ReactRouter
Vue 的 vue-router

React Router在最近两年版本更新的较快，并且在最新的 React Router 6.x 版本中发生了较大的变化。

目前 React Router6.x 已经非常稳定，我们可以放心的使用；

安装React Router：

安装时，我们选择 react-router-dom；
react-router 会包含一些 react-native 的内容，web开发并不需要；

npm i react-router-dom

3. Router 的基本使用

3.1 开启路由功能

react-router 最主要的 API 是给我们提供的一些组件：

BrowserRouter 或 HashRouter

Router 中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
BrowserRouter 使用 history 模式；
HashRouter 使用 hash 模式；

import ReactDOM from "react-dom/client"
import App from "./App"
// 引入 HashRouter，给 App 开启 hash 路由功能
import { HashRouter } from "react-router-dom"
const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <HashRouter>
    <App></App>
  </HashRouter>
);

3.2 路由映射配置

Routes：包裹所有的Route，在其中匹配一个路由

Router5.x 使用的是 Switch 组件

Route：Route 用于路径的匹配；

path 属性：用于设置匹配到的路径；
element 属性：设置匹配到路径后，渲染的组件；(Router5.x 使用的是component属性)
exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件（Router6.x不再支持该属性，已内置）

import { Route, Routes } from "react-router-dom";
// ... 省略部分代码
 <Routes>
   <Route path="/home" element={<Home />}></Route>
   <Route path="/about" element={<About />}></Route>
 </Routes>

3.3 路由跳转

Link 和 NavLink：

通常路径的跳转是使用Link组件，最终会被渲染成a元素；
NavLink是在Link基础之上增加了一些样式属性（后续学习）；
to 属性：Link中最重要的属性，用于设置跳转到的路径；

import { Link } from "react-router-dom";
// ... 省略部分代码
<div className='nav'>
  <Link to="/home">首页</Link>
  <Link to="/about">关于</Link>
</div>

4. NavLink的使用

需求：路径选中时，对应的 a 元素变为红色

这个时候，我们要使用 NavLink 组件来替代 Link 组件

style：传入函数，函数接受一个对象，包含 isActive 属性 (动态添加样式)
className：传入函数，函数接受一个对象，包含 isActive 属性(用于动态添加class)

import { NavLink } from "react-router-dom";
// ... 省略部分代码
<div className="nav">
  <NavLink to="/home" style={({ isActive }) => ({ color: isActive ? "red" : "" })}>首页</NavLink>
  <NavLink to="/about" style={({ isActive }) => ({ color: isActive ? "red" : "" })}>关于</NavLink>
</div>

默认的 activeClassName：

事实上在默认匹配成功时，NavLink 就会添加上一个动态的 active class；
所以我们也可以直接编写样式

当然，如果你担心这个 class 在其他地方被使用了，出现样式的层叠，也可以自定义class

import { NavLink } from "react-router-dom";
// ... 省略部分代码
<div className="nav">
  <NavLink to="/home" className={({isActive}) => isActive?'hight-light':''}>首页</NavLink>
  <NavLink to="/about" className={({isActive}) => isActive ? 'hight-light' : ''}>关于</NavLink>
</div>

5. Navigate 导航

Navigate 用于路由的重定向，当这个组件出现时，就会执行跳转到对应的 to 路径中：

import React, { PureComponent } from 'react'
import {Navigate} from "react-router-dom"
export default class Login extends PureComponent {
  constructor() {
    super()
    this.state = { isLogin:false }
  }
  login() {
    this.setState({ isLogin:true })
  }
  render() {
    const {isLogin} = this.state
    return (
      <div>
        <h2>Login page</h2>
        {/* 点击登录让 isLogin 为true，跳转到 home页 */}
        {isLogin?<Navigate to="/home"></Navigate>:<button onClick={e=> this.login()}>登录</button>}
      </div>
    )
  }
}

路由重定向：也可以在匹配到 / 的时候，直接跳转到 /home 页面

<Routes>
  <Route path='/' element={<Navigate to="/home" />}></Route>
  <Route path="/home" element={<Home />}></Route>
</Routes>

6. Not Found 页面配置

如果用户随意输入一个地址，该地址无法匹配，那么在路由匹配的位置将什么内容都不显示。

很多时候，我们希望在这种情况下，让用户看到一个 Not Found 的页面。

这个过程非常简单：

开发一个Not Found页面；
配置对应的 Route，并且设置 path 为 * 即可；

<Routes>
  <Route path="/about" element={<About />}></Route>
  <Route path="/login" element={<Login />}></Route>
  <Route path='*' element={ <NotFound/> }></Route>
</Routes>

7. 路由的嵌套

在开发中，路由之间是存在嵌套关系的。
这里我们假设 Home 页面中有两个页面内容：HomeList 和 HomeBanner；
点击不同的链接可以跳转到不同的地方，显示不同的内容；
<Outlet> 组件用于在父路由元素中作为子路由的占位元素。

<Routes>
  <Route path='/' element={<Navigate to="/home" />}></Route>
  <Route path="/home" element={<Home />}>
    <Route path='/home' element={ <Navigate to="/home/list"/>}></Route>
    <Route path="/home/list" element={ <HomeList />}></Route>
    <Route path="/home/banner" element={ <HomeBanner />}></Route>
  </Route>
  <Route path="/about" element={<About />}></Route>
</Routes>

import { Link, Outlet } from 'react-router-dom'
<h2>Home page</h2>
<div className='home-nav'>
  <Link to='/home/list'>列表</Link>
  <Link to='/home/banner'>轮播图</Link>
</div>
{/* 占位的组件 */}
<Outlet></Outlet>

8. 手动路由的跳转

目前我们实现的跳转主要是通过 Link 或者 NavLink 进行跳转的，实际上我们也可以通过JavaScript代码进行跳转。

我们知道 Navigate 组件是可以进行路由的跳转的，但是依然是组件的方式。
如果我们希望通过 JavaScript 代码逻辑进行跳转（比如点击了一个button），那么就需要获取到 navigate 对象。

在 Router6.x 版本之后，代码类的 API 都迁移到了 hooks 的写法：

如果我们希望进行代码跳转，需要通过 useNavigate 的 Hook 获取到 navigate 对象进行操作；
useNavigate 得在函数式组件中使用

【示例：实现 order 和 category 之前的跳转】

import React from 'react'
import { Route, Routes,useNavigate } from "react-router-dom";
import Order from "./pages/Order"
import Category from './pages/Category';
export function App(props) {
  const navigate = useNavigate();
  function navigateTo(path) {
    navigate(path)
  }
    return (
      <div className="app">
        <div className="header">
          <span>header</span>
          <div className="nav">
            <button onClick={(e) => navigateTo("/category")}>分类</button>
            <span onClick={(e) => navigateTo("/order")}>订单</span>
          </div>
        </div>
        <div className="content">
          <Routes>
            <Route path="/category" element={<Category />}></Route>
            <Route path="/order" element={<Order />}></Route>
          </Routes>
        </div>
        <div className="footer">footer</div>
      </div>
    );
}
export default App

但是如果是一个类组件，需要特殊处理(如用高阶组件来增强)

// 用高阶组件 增强 类组件 Category，使其拥有 useNavigate
// 点击按钮：跳转到 order 组件
import React, { PureComponent } from 'react'
import { useNavigate } from 'react-router-dom';
class Category extends PureComponent {
  navigateTo(path) {
    const { navigate } = this.props.router;
    navigate(path)
  }
  render() {
    return (
      <div>
        <h2>Category</h2>
        <button onClick={(e) => this.navigateTo("/order")}>点击</button>
      </div>
    );
  }
}
// 高阶组件：
function withRouter(WrapperComponent) {
  return function (props) {
    const navigate = useNavigate();
    const router = { navigate };
    return <WrapperComponent {...props} router = {router} />
  }
}
export default withRouter(Category);

若以后用得到增强路由的高阶组价，这里把它抽离到单独的文件中，hoc/with_router.js

import { useNavigate } from "react-router-dom";
export default function withRouter(WrapperComponent) {
  return function (props) {
    const navigate = useNavigate();
    const router = { navigate };
    return <WrapperComponent {...props} router = {router} />
  }
}

11. 路由参数传递

传递参数有二种方式：

动态路由的方式；
search传递参数；

11.1 动态路由传参

动态路由的概念指的是路由中的路径并不会固定：

比如 /detail 的 path 对应一个组件 Detail；
如果我们将 path 在 Route 匹配时写成 /detail/:id ，那么 /detail/abc、/detail/123 都可以匹配到该 Route，并且进行显示；
这个匹配规则，我们就称之为动态路由；
通常情况下，使用动态路由可以为路由传递参数。

【示例描述：App组件含Home组件，Home组件中包含路由出口，该出口渲染 detail 组件，以及展示传递过去的参数】

目录结构

|--hoc
    with_router.js
|--App.jsx
|--Detail.jsx
|--Home.jsx
|--index.js

hoc/with_router.js

// hoc/with_router.js 文件 高阶组件，给类组件添加一些路由功能
import { useNavigate,useParams } from "react-router-dom";
export default function withRouter(WrapperComponent) {
  return function (props) {
    const navigate = useNavigate();
    const params = useParams()
    const router = { navigate,params };
    return <WrapperComponent {...props} router={router} />;
  };
}

Home.jsx 文件

// Home.jsx 文件
import React, { PureComponent } from 'react'
import { Routes, Route } from "react-router-dom";
import Detail from "./Detail";
import withRouter from "./hoc/with_router.js"
export class Home extends PureComponent {
  constructor() {
    super()
    this.state = {
      books: [{ id: 1, name: 'js高级' }, {id:2,name:'vue高级'},{id:3,name:'react高级'}]
    }
  }
  navigateToDetail(id) {
    // 点击后跳转到 detail ；但是类组件不能直接用 navigate 功能，需要 高阶组价来增强
    // 即上面引入的 的 withRouter；然后获得 navigate
    const { navigate } = this.props.router;
    navigate(`/detail/${id}`);
  }
  render() {
    const {books} = this.state
    return (
      <div>
        <h2>Home</h2>
        <ul>
          {books.map((item) => (
            <li key={item.id} onClick={(e) => this.navigateToDetail(item.id)}>
              {item.name}
            </li>
          ))}
        </ul>
        {/* 路由 */}
        <Routes>
          <Route path="/detail/:id" element={<Detail />}></Route>
        </Routes>
      </div>
    );
  }
}
export default withRouter(Home);

Detail.jsx ，在 detail 组件中，通过 router 中的 params 获取动态参数

// Detail.jsx 文件
import React, { PureComponent } from 'react'
import withRouter from './hoc/with_router';
class Detail extends PureComponent {
  render() {
    const { router } = this.props
    const { params } = router;
    return (
      <div>
        <h2>Detail page</h2>
        <h3>id:{ params.id }</h3>
      </div>
    );
  }
}
export default withRouter(Detail)

11.2 search传参

目录结构和上文一样

hoc/with_router.js

import { useNavigate,useParams,useSearchParams } from "react-router-dom";
export default function withRouter(WrapperComponent) {
  return function (props) {
    // 1.导航
    const navigate = useNavigate();
    // 2. 动态路由参数 /detail/:id
    const params = useParams()
    // 3. 查询字符串的参数 ： /detail?id=1&name=js
    const [searchParams] = useSearchParams();
    const query = Object.fromEntries(searchParams)
    const router = { navigate, params, query };
    return <WrapperComponent {...props} router={router} />;
  };
}

Home.jsx

import React, { PureComponent } from 'react'
import { Routes, Route,Link } from "react-router-dom";
import Detail from "./Detail";
import withRouter from "./hoc/with_router.js"
export class Home extends PureComponent {
  render() {
    return (
      <div>
        <h1>Home</h1>
        <Link to="/detail?id=1&name=js">跳转</Link>
        {/* 路由 */}
        <Routes>
          <Route path="/detail" element={<Detail />}></Route>
        </Routes>
        <h1>Footer</h1>
      </div>
    );
  }
}
export default withRouter(Home);

Detail.jsx

import React, { PureComponent } from 'react'
import withRouter from './hoc/with_router';
class Detail extends PureComponent {
  render() {
    const { router } = this.props
    const {query} = router
    return (
      <div>
        <h2>Detail page</h2>
        <h3>id:{query.id }name:{query.name }</h3>
      </div>
    );
  }
}
export default withRouter(Detail)

12. 路由的配置文件

12.1 路由抽取

目前我们所有的路由定义都是直接使用 Route 组件，并且添加属性来完成的。

但是这样的方式会让路由变得非常混乱，我们希望将所有的路由配置放到一个地方进行集中管理：

在早期的时候，Router 并且没有提供相关的 API，我们需要借助于 react-router-config 完成；
在Router6.x中，为我们提供了 useRoutes API可以完成相关的配置；

route 文件

import 各种路由组件 ...
import Home from "./Home";
import { Navigate } from "react-router-dom";
const routes = [
  {
    path: '/',
    element: <Navigate to="/home" />
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: '/home',
        element: <Navigate to="/home/recommend" />
      },
      {
        path: '/home/rank'
      }
    ]
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '*',
    element:<NotFound />
  }
]
export default routes

导航组件

import { useRoutes } from "react-router-dom";
import routes from './router/routes'
function App() {
  let element = useRoutes(routes);
  return element;
}

12.2 路由懒加载

如果我们对某些组件进行了异步加载（懒加载）(分包)，那么需要使用 Suspense 进行包裹：

// 在导入组件的时候，不要直接 import导入；
const About = React.lazy(() => import("../pages/About"))

并且还要在 index.js 中，给 App包裹上 Suspense

import { Suspense } from 'react';
// 在组件未加载完时，显示 h2 loading
root.render(
  <Suspense fallback={<h2>loading</h2>} >
    <HashRouter>
      <App />
    </HashRouter>
  </Suspense>
);