React篇——第四章 React Router基础

[1. 什么是前端路由](#1. 什么是前端路由)

[2. 创建路由开发环境](#2. 创建路由开发环境)

[3. 快速开始](#3. 快速开始)

[4. 抽象路由模块](#4. 抽象路由模块)

[5. 路由导航](#5. 路由导航)

[5.1 声明式导航](#5.1 声明式导航)

[5.2 编程式导航](#5.2 编程式导航)

[6. 导航传参](#6. 导航传参)

方式一：路径参数（Params）

[方式二：查询参数（Search Params）](#方式二：查询参数（Search Params）)

方式三：状态参数（State）

[7. 嵌套路由配置](#7. 嵌套路由配置)

[7.1 什么是嵌套路由](#7.1 什么是嵌套路由)

[7.2 嵌套路由配置](#7.2 嵌套路由配置)

[7.3 默认二级路由](#7.3 默认二级路由)

[7.4 404路由配置](#7.4 404路由配置)

[7.5 两种路由模式](#7.5 两种路由模式)

[8. 总结](#8. 总结)

核心概念回顾

最佳实践建议

本文介绍了React Router的核心概念和使用方法。主要内容包括：

前端路由通过路径映射组件实现SPA应用；

路由配置使用createBrowserRouter创建，RouterProvider注入；

提供了声明式导航（Link组件）和编程式导航（useNavigate钩子）两种方式；

详细讲解了路径参数、查询参数和状态参数三种传参方式；

介绍了嵌套路由的配置方法，包括默认二级路由和404路由处理；

比较了History和Hash两种路由模式的适用场景。

文章还给出了模块化路由配置、组件懒加载等最佳实践建议，帮助开发者构建功能完善的单页应用。

1. 什么是前端路由

前端路由的核心概念非常简单：一个路径 path 对应一个组件 component。当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行渲染。

这种设计使得我们可以构建单页应用（SPA），用户在页面间切换时不需要重新加载整个页面，大大提升了用户体验。

2. 创建路由开发环境

在开始使用 React Router 之前，我们需要先搭建好开发环境：

bash 复制代码

# 使用 Create React App 创建项目
npm create-react-app react-router-pro

# 进入项目目录
cd react-router-pro

# 安装最新的 React Router 包
npm i react-router-dom

# 启动项目
npm run start

React Router DOM 是 React Router 在浏览器环境中的实现，包含了我们开发 Web 应用所需的所有核心功能。

3. 快速开始

让我们通过一个简单的例子来快速上手 React Router：

html 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/login',
    element: <div>登录页面</div>
  },
  {
    path: '/article',
    element: <div>文章列表</div>
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
)

核心概念解析：

createBrowserRouter：用于创建路由配置对象，接收一个路由数组作为参数
RouterProvider：路由提供器组件，负责将路由配置注入到 React 应用中
path：路由路径，浏览器访问的 URL
element：该路径对应的 React 组件

4. 抽象路由模块

在实际项目中，我们通常不会把路由配置直接写在入口文件里，而是将其抽象为一个独立的模块，这样更便于维护和管理。

推荐的目录结构：

bash 复制代码

src/
├── router/
│   └── index.js       # 路由配置模块
├── pages/
│   ├── Login.jsx      # 登录页面
│   └── Article.jsx    # 文章页面
└── index.js           # 入口文件

router/index.js：

javascript 复制代码

import { createBrowserRouter } from 'react-router-dom'
import Login from '../pages/Login'
import Article from '../pages/Article'

const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/article',
    element: <Article />
  }
])

export default router

index.js：

javascript 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router'

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
)

5. 路由导航

路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。

React Router 提供了两种导航方式：声明式导航 和编程式导航。

5.1 声明式导航

声明式导航是指通过在模板中通过 <Link/> 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式。

语法说明：

通过给组件的 to 属性指定要跳转到的路由 path，组件会被渲染为浏览器支持的 <a> 链接。如果需要传参，直接通过字符串拼接的方式拼接参数即可。

javascript 复制代码

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

function Nav() {
  return (
    <nav>
      <Link to="/login">登录</Link>
      <Link to="/article">文章列表</Link>
      {/* 带参数的链接 */}
      <Link to="/article/123">文章详情</Link>
    </nav>
  )
}

<Link> 组件的常用属性：

to：目标路由路径
replace：是否替换当前历史记录，而不是添加新记录
state：附加的状态数据

5.2 编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转。比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活。

语法说明：

javascript 复制代码

import { useNavigate } from 'react-router-dom'

function Login() {
  const navigate = useNavigate()

  const handleLogin = () => {
    // 登录逻辑...
    
    // 跳转到指定路径
    navigate('/article')
    
    // 回退到上一页
    // navigate(-1)
    
    // 前进到下一页
    // navigate(1)
    
    // 替换当前记录
    // navigate('/article', { replace: true })
    
    // 携带状态数据
    // navigate('/article', { state: { from: 'login' } })
  }

  return (
    <button onClick={handleLogin}>登录</button>
  )
}

useNavigate 的使用场景：

表单提交后跳转
异步请求完成后跳转
需要根据条件判断跳转目标
需要回退或前进操作

6. 导航传参

在路由跳转时，我们经常需要传递一些参数。React Router 提供了多种传参方式。

方式一：路径参数（Params）

javascript 复制代码

// 路由配置
const router = createBrowserRouter([
  {
    path: '/article/:id',
    element: <ArticleDetail />
  }
])

// 导航时
<Link to="/article/123">文章详情</Link>
// 或
navigate('/article/123')

// 组件中获取参数
import { useParams } from 'react-router-dom'

function ArticleDetail() {
  const params = useParams()
  console.log(params.id) // '123'
  return <div>文章ID: {params.id}</div>
}

方式二：查询参数（Search Params）

javascript 复制代码

// 导航时
<Link to="/article?id=123&name=react">文章详情</Link>
// 或
navigate('/article?id=123&name=react')

// 组件中获取参数
import { useSearchParams } from 'react-router-dom'

function ArticleDetail() {
  const [searchParams] = useSearchParams()
  console.log(searchParams.get('id')) // '123'
  console.log(searchParams.get('name')) // 'react'
  return <div>文章ID: {searchParams.get('id')}</div>
}

方式三：状态参数（State）

javascript 复制代码

// 导航时
<Link to="/article" state={{ id: 123, name: 'react' }}>文章详情</Link>
// 或
navigate('/article', { state: { id: 123, name: 'react' } })

// 组件中获取参数
import { useLocation } from 'react-router-dom'

function ArticleDetail() {
  const location = useLocation()
  console.log(location.state) // { id: 123, name: 'react' }
  return <div>文章ID: {location.state.id}</div>
}

7. 嵌套路由配置

7.1 什么是嵌套路由

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由。嵌套至一级路由内的路由又称作二级路由。

嵌套路由非常适合构建具有侧边栏、顶部导航等布局的应用程序。

7.2 嵌套路由配置

实现步骤：

使用 children 属性配置路由嵌套关系
使用 <Outlet/> 组件配置二级路由渲染位置

复制代码

javascript 复制代码

// 路由配置
const router = createBrowserRouter([
  {
    path: '/layout',
    element: <Layout />,
    children: [
      {
        path: 'board',
        element: <Board />
      },
      {
        path: 'article',
        element: <Article />
      }
    ]
  }
])

// Layout 组件
import { Outlet, Link } from 'react-router-dom'

function Layout() {
  return (
    <div>
      <div className="header">
        <Link to="/layout/board">看板</Link>
        <Link to="/layout/article">文章</Link>
      </div>
      <div className="content">
        {/* 二级路由的渲染位置 */}
        <Outlet />
      </div>
    </div>
  )
}

7.3 默认二级路由

当访问的是一级路由时，默认的二级路由组件可以得到渲染。只需要在二级路由的位置去掉 path，设置 index 属性为 true。

javascript 复制代码

const router = createBrowserRouter([
  {
    path: '/layout',
    element: <Layout />,
    children: [
      {
        index: true, // 配置默认二级路由
        element: <Board />
      },
      {
        path: 'article',
        element: <Article />
      }
    ]
  }
])

现在当访问 /layout 时，会自动渲染 <Board /> 组件。

7.4 404路由配置

场景： 当浏览器输入 url 的路径在整个路由配置中都找不到对应的 path，为了用户体验，可以使用 404 兜底组件进行渲染。

实现步骤：

准备一个 NotFound 组件
在路由表数组的末尾，以 * 号作为路由 path 配置路由

javascript 复制代码

// NotFound 组件
function NotFound() {
  return (
    <div>
      <h1>404</h1>
      <p>页面不存在</p>
      <Link to="/">返回首页</Link>
    </div>
  )
}

// 路由配置
const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login />
  },
  {
    path: '/article',
    element: <Article />
  },
  // 404 路由，放在最后
  {
    path: '*',
    element: <NotFound />
  }
])

7.5 两种路由模式

各个主流框架的路由常用的路由模式有两种：history 模式 和 hash 模式 。React Router 分别由 createBrowserRouter 和 createHashRouter 函数负责创建。

路由模式	URL 表现	底层原理	是否需要后端支持
history	`url/login`	history 对象 + pushState 事件	需要
hash	`url/#/login`	监听 hashChange 事件	不需要

History 模式：

javascript 复制代码

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

const router = createBrowserRouter([
  // 路由配置...
])

function App() {
  return <RouterProvider router={router} />
}

Hash 模式：

javascript 复制代码

import { createHashRouter, RouterProvider } from 'react-router-dom'

const router = createHashRouter([
  // 路由配置...
])

function App() {
  return <RouterProvider router={router} />
}

选择建议：

如果是公司内部项目或有服务器控制权，推荐使用 History 模式，URL 更美观
如果是静态托管或没有服务器配置权限，推荐使用 Hash 模式，兼容性更好

8. 总结

本文我们全面介绍了 React Router 的基础用法，包括：

核心概念回顾

路由的本质：路径与组件的映射关系
两种导航方式：
- 声明式导航（<Link>）：适合菜单、按钮等静态导航
- 编程式导航（useNavigate）：适合表单提交、异步操作后的动态跳转
三种传参方式：
- 路径参数（useParams）：适合 ID 等必需参数
- 查询参数（useSearchParams）：适合筛选、分页等可选参数
- 状态参数（useLocation）：适合复杂对象数据
嵌套路由 ：使用 children 和 <Outlet> 实现复杂布局
默认路由 ：使用 index: true 配置默认二级路由
404 路由 ：使用 path: '*' 处理未找到的路由
两种路由模式：History 模式和 Hash 模式

最佳实践建议

路由模块化：将路由配置抽象为独立模块
组件懒加载 ：大项目中使用 React.lazy 和 Suspense 实现路由级别的代码分割
路由守卫：通过高阶组件或自定义 Hook 实现权限控制
合理使用传参方式：根据场景选择合适的参数传递方式

React Router 是 React 生态中最常用的路由解决方案，掌握这些基础知识后，你就可以构建出功能完善的单页应用了！

扩展阅读：

React Router 官方文档：https://reactrouter.com/
React Router 高级特性：路由守卫、数据加载等