目录
一、为什么需要 React Router？
二、React Router 的核心思想
三、快速上手：完成一个基础的示例
安装
路由入口配置
Hash模式与History的区别
如何使用
声明式跳转：Link
四、动态路由与参数
1️⃣ 路由定义
2️⃣ 获取参数
五、常见的hook总结
六、路由懒加载
七、路由守卫
作为一名前端开发者，路由几乎是绕不开的核心能力之一。本文将以 React Router v6 为主线，从概念理解 → 基础用法 → 进阶技巧 → 常见坑位 → 实战示例，从而掌握 React Router
一、为什么需要 React Router？
在传统的多页面应用（MPA）中，每一次页面跳转都会向服务器请求一个新的 HTML 文件，体验和性能都有限。
而在 SPA（单页应用） 中：
- 页面只加载一次
- 不同“页面”其实是 不同组件的切换
- URL 的变化需要和组件状态保持同步
👉 这就是 前端路由 的职责。
React Router 是 React 生态中最成熟、最主流的路由解决方案。
二、React Router 的核心思想
React Router 本质上只做了三件事：
三、快速上手：完成一个基础的示例
安装
npm install react-router-dom
路由入口配置
import { BrowserRouter } from 'react-router-dom'
import App from './App'
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
)
BrowserRouter （History）与 HashRouter 的区别l
Hash模式与History的区别
首先这个是不同的两种路由模式，都能实现前端路由跳转。hash模式利用URL中的hash（#）部分来实现路由。hash的变化不会导致浏览器向服务器发送请求，因此完全由前端控制。
<https://example.com/#/home>
<https://example.com/#/about>
<https://example.com/#/user/123>
hash模式核心在于监听hasChange事件，当hash部分变化时，会触发这个事件，但不会向服务器发送请求。
优势： 兼容性好，不需要服务器端配置，hash变化不会导致页面刷新
History模式基于 HTML5 的History API, 提供更加直观的url结构与传统的url没有区别
<https://example.com/home>
<https://example.com/about>
<https://example.com/user/123>
history api
window.history.pushState(state, title, url); // 添加历史记录
window.history.replaceState(state, title, url); // 替换当前历史记录
window.history.back(); // 后退
window.history.forward(); // 前进
window.history.go(n); // 前进或后退n步
优点：url美观，兼容性需要IE10+, 对SEO支持程度好， 但是需要服务器配置
相关面试题：history & hash
URL结构差异：hash模式包含#，history模式是标准URL
实现原理：hash模式基于hashchange事件，history模式基于History API
服务器配置：hash模式无需配置，history模式需要服务器通配路由
兼容性：hash模式兼容性更好
SEO影响：history模式对SEO更友好，容易被搜索引擎抓取
如何使用
那么具体如何使用react router
首先我们需要定义路由规则，也就是定义哪些页面能够通过路由规则进行跳转，我们需要引入响应的界面以及进入这个界面需要的路由地址。
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import User from './pages/About'
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/user" element={<User />} />
</Routes>
)
}
那么已经定义了路由能够进入的页面，接下来就是定义如何跳转进入这些页面
比如导航栏上面能帮助我们进入首页，用户页面，设置页面。
这里我们有两种方式进行跳转，分别是声明式跳转与函数式跳转
声明式跳转：Link
import { Link } from 'react-router-dom'
<Link to="/Use">用户
</Link>
编程式跳转：useNavigate
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate('/user')
编程式跳转最常见就是用在登录跳转，我们登录验证请求成功后将触发跳转
四、动态路由与参数
我们有时候在跳转不同界面的时候需要传递相关联的参数，这时候就需要用到动态路由。也就是我们需要在定义路由的时候留一个预置位。
1️⃣ 路由定义
<Route path="/user/:id" element={<User />} />
2️⃣ 获取参数
当我们在跳转后的界面需要使用这个参数的时候，我们就需要用useParams(), 从而能够提取传递的参数。
import { useParams } from 'react-router-dom'
const { id } = useParams()
📌 URL：/user/123 → id === '123'
五、常见的hook总结
| useNavigate | 路由跳转 |
| useParams | 动态参数 |
| useLocation | 当前路径信息 |
| useSearchParams | 查询参数 |
六、路由懒加载
懒加载（Lazy Loading）是一种优化技术，它可以：
- 延迟加载非必需的组件，只有你需要加载的时候加载，或者在指定时间预加载，比如首屏渲染后再预加载主要组件，当路由到主要组件时，主要组件已经在首屏渲染后预加载好了。
- 减小初始包的大小
- 提高应用的首次加载性能
React 提供了 React.lazy 和 Suspense 两个 API 来实现懒加载。React.lazy 用于动态导入组件，而 Suspense 用于指定加载过程中的占位内容，提供一个“加载中”的提示。
// 这个lazy将import变成异步的，当需要使用的时候才加载
const Home = React.lazy(() => import('./pages/Home'))
// Suspense 作用是在组件加载完成前渲染 fallback 内容
<Suspense fallback={<div>Loading…</div>}>
<Home />
</Suspense>
具体案例
import { Routes, Route } from 'react-router-dom'
import React, { Suspense } from 'react'
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
function App() {
return (
<Suspense fallback={<div>页面加载中…</div>}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Suspense>
)
}
七、路由守卫
在真实项目中，我们有时候需要做权限控制，当前用户是否有资格去访问该页面
不做路由守卫的后果，用户可能能看到不该看到的页面结构
一般来说，我们的前置条件有
以下是一个针对是否登录判断案例。
import { Navigate, useLocation } from 'react-router-dom'
function AuthRoute({ children }) {
const isLogin = Boolean(localStorage.getItem('token'))
const location = useLocation()
if (!isLogin) {
return <Navigate to="/login" replace state={{ from: location }} />
}
return children
}
以上如有错误欢迎修改
