目录
[一、为什么需要 React Router？](#一、为什么需要 React Router？)
[二、React Router 的核心思想](#二、React Router 的核心思想)
[1️⃣ 路由定义](#1️⃣ 路由定义)
[2️⃣ 获取参数](#2️⃣ 获取参数)
作为一名前端开发者，路由几乎是绕不开的核心能力之一。本文将以 React Router v6 为主线，从概念理解 → 基础用法 → 进阶技巧 → 常见坑位 → 实战示例，从而掌握 React Router
一、为什么需要 React Router？
在传统的多页面应用（MPA）中，每一次页面跳转都会向服务器请求一个新的 HTML 文件，体验和性能都有限。
而在 SPA（单页应用） 中：
- 页面只加载一次
- 不同"页面"其实是 不同组件的切换
- URL 的变化需要和组件状态保持同步
👉 这就是 前端路由 的职责。
React Router 是 React 生态中最成熟、最主流的路由解决方案。
二、React Router 的核心思想
React Router 本质上只做了三件事：
- 监听 URL 变化
- 匹配路由规则
- 渲染对应组件
三、快速上手：完成一个基础的示例
安装
npm install react-router-dom路由入口配置
javascript
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没有区别
javascript
<https://example.com/home>
<https://example.com/about>
<https://example.com/user/123>history api
javascript
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
首先我们需要定义路由规则，也就是定义哪些页面能够通过路由规则进行跳转，我们需要引入响应的界面以及进入这个界面需要的路由地址。
javascript
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
javascript
import { Link } from 'react-router-dom'
<Link to="/Use">用户
</Link>编程式跳转：useNavigate
javascript
import { useNavigate } from 'react-router-dom'
const navigate = useNavigate()
navigate('/user')编程式跳转最常见就是用在登录跳转，我们登录验证请求成功后将触发跳转
四、动态路由与参数
我们有时候在跳转不同界面的时候需要传递相关联的参数，这时候就需要用到动态路由。也就是我们需要在定义路由的时候留一个预置位。
1️⃣ 路由定义
javascript
<Route path="/user/:id" element={<User />} />2️⃣ 获取参数
当我们在跳转后的界面需要使用这个参数的时候，我们就需要用useParams(), 从而能够提取传递的参数。
javascript
import { useParams } from 'react-router-dom'
const { id } = useParams()📌 URL：/user/123 → id === '123'
五、常见的hook总结
| Hook | 作用 |
|---|---|
| useNavigate | 路由跳转 |
| useParams | 动态参数 |
| useLocation | 当前路径信息 |
| useSearchParams | 查询参数 |
六、路由懒加载
懒加载（Lazy Loading）是一种优化技术，它可以：
- 延迟加载非必需的组件，只有你需要加载的时候加载，或者在指定时间预加载，比如首屏渲染后再预加载主要组件，当路由到主要组件时，主要组件已经在首屏渲染后预加载好了。
- 减小初始包的大小
- 提高应用的首次加载性能
React 提供了 React.lazy 和 Suspense 两个 API 来实现懒加载。React.lazy 用于动态导入组件，而 Suspense 用于指定加载过程中的占位内容，提供一个"加载中"的提示。
javascript
// 这个lazy将import变成异步的，当需要使用的时候才加载
const Home = React.lazy(() => import('./pages/Home'))
// Suspense 作用是在组件加载完成前渲染 fallback 内容
<Suspense fallback={<div>Loading...</div>}>
<Home />
</Suspense>具体案例
javascript
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>
)
}七、路由守卫
在真实项目中，我们有时候需要做权限控制，当前用户是否有资格去访问该页面
不做路由守卫的后果，用户可能能看到不该看到的页面结构
一般来说，我们的前置条件有
- 用户是否登录
- 用户的角色或权限
- 跳转规则，比如能调转到登录界面
以下是一个针对是否登录判断案例。
javascript
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
}以上如有错误欢迎修改