前言
想象一下：你打开一个网站，从 “首页” 点到 “个人中心”，页面连个白屏都没有 —— 这不是魔法，是 单页应用（SPA） 的 “小心机”。而让 SPA 实现 “网址变、内容换” 的幕后大佬，就是今天要唠的 React Router。我今天以一个后台管理系统来全方位的拆解路由的细节~
想要详细React Router资料可以在这里找到：
一、从 “多页翻书” 到 “单页变魔术”
早年间的网站是 “多页应用” ：点个链接跳转到新 HTML 文件，像翻书似的 “唰唰” 换页。但缺点很明显：加载慢、体验卡，就像翻一本 500 页的字典找个词，翻半天手都酸了。
现在的 SPA 是 “单页魔术盒”：只有一个 HTML 文件，网址变了，只是把对应的 “组件” 塞进这个盒子里 —— 就像变魔术时从盒子里掏出不同道具，盒子本身根本不动。
比如我写的这个后台管理系统：
- 访问
http://localhost:5173/login→ 塞进「登录组件」 - 访问
http://localhost:5173/home→ 塞进「首页组件」网址变，内容秒切，丝滑到像德芙广告～
二、React Router：SPA 的 “导航指挥家”
要实现这种 “秒切”，得请出react-router-dom这个 “指挥家”。它的核心成员有这些（结合我们的后台系统代码来看更爽）：
首先你需要安装好react-router：
就在我开头给的网址里面就可以找到哈！
1. BrowserRouter：给应用 “装个导航系统”
它是路由的 “容器” ，相当于给整个应用装了个 “导航大脑” （用的是 HTML5 的 History API，所以网址长得像正常网址）。
看App.jsx的开头：
import { BrowserRouter, Routes, Route } from 'react-router-dom'
export default function App() {
return (
<BrowserRouter> {/* 所有路由配置都得包在它里面 */}
<Routes>
{/* 这里塞各种路由规则 */}
</Routes>
</BrowserRouter>
)
}
机-会
技术大厂，前端-后端-测试，新一线和一二线城市等地均有机-会，感兴趣可以试试。待遇和稳定性都不错~
2. Routes + Route：给 “组件” 贴 “网址标签”
Routes是 “路由出口”，Route是 “网址→组件” 的标签贴。比如我们的后台系统，给 「登录页」「首页」 贴标签：
<Routes>
{/* 根路径直接跳转到登录页 */}
<Route path="/" element={<Navigate to="/login" />} />
{/* 访问/login → 显示Login组件（就是我们写的登录界面） */}
<Route path="/login" element={<Login />} />
{/* 访问/home → 显示Home组件（首页），同时它是二级路由的容器 */}
<Route path="/home" element={<Home />}>
{/* 二级路由：/home/class → 显示Class组件 */}
<Route path="class" element={<Class />} />
{/* 二级路由：/home/leetcode → 显示LeetCode组件 */}
<Route path="leetcode" element={<LeetCode />} />
</Route>
{/* 404页面：匹配不到的网址都显示这个 */}
<Route path="*" element={<h2>NOT FOUND</h2>} />
</Routes>
登录首页：
点击登录（自动进入/home/class）：
像不像给每个组件发了张 “网址门票”？拿着/login门票，就能进登录页的门？
3. Outlet：二级路由的 “展示窗口”
首页Home是个 “大容器”，里面要放class和leetcode这些 “子页面”——Outlet就是这个 “子页面展示窗口”。
看Home.jsx的代码：
import { Outlet, Link } from 'react-router-dom'
export default function Home() {
return (
<div className="home">
<header>后台管理系统</header>
<main className="body">
<aside>
{/* 侧边栏导航，点了跳转到二级路由 */}
<li><Link to="/home/class">课程</Link></li>
<li><Link to="/home/leetcode">算法</Link></li>
</aside>
<main className="content">
{/* 二级路由的内容就显示在这里！ */}
<Outlet />
</main>
</main>
</div>
)
}
点击算法进入/home/leetcode：
Outlet就像电视屏幕，点 “课程” 就播 《课程频道》 ，点 “算法” 就切 《LeetCode 频道》 。
4. Link：SPA 的 “无痛跳转链接”
传统的<a>标签跳转是 “翻页”，Link是 “换内容”—— 点它网址变，但页面不刷新，就像遥控器换台。
比如首页侧边栏的导航：
<Link to="/home/class">课程</Link>
5. useNavigate：“编程式跳转” 的魔法棒
有时候需要 “代码触发跳转”（比如登录成功后自动跳首页），这时候useNavigate就派上用场了。
看我们的Login.jsx：
import { useNavigate } from 'react-router-dom'
export default function Login() {
const navigate = useNavigate() // 拿到跳转函数
const login = () => {
// 登录逻辑...
navigate('/home') // 登录成功，跳转到首页！
}
return (
<div className="login">
<input placeholder="账号" />
<input placeholder="密码" />
<button onClick={login}>登录</button>
</div>
)
}
点登录前：
点登录后：
点 “登录” 按钮，navigate('/home')一执行，网址直接切到首页，比外卖小哥送餐还快～
三、总结：React Router 就是 SPA 的 “导航全家桶”
把这些成员凑一起，我们的后台系统就活了：
- 打开网站，
/自动跳/login→ 显示登录界面（带输入框和绿色登录按钮）； - 点 “登录”，
useNavigate跳/home→ 显示首页（带侧边栏）； - 点侧边栏 “课程”，
Link跳/home/class→Outlet显示课程页面； - 输错网址，直接显示
NOT FOUND→ 404 页面。
是不是感觉 React Router 像个 “全能导航员” ？既管网址匹配，又管页面切换，还能代码跳转 —— 有了它，SPA 才能像 “魔术盒” 一样，变内容比变魔术还快！
结语
说到底，React Router 就是单页应用的 “流量控制器” ，它用极简的配置和灵活的 API，让我们的后台管理系统实现了 “网址变、组件换” 的丝滑体验。从登录页到首页，从一级路由到二级路由，没有烦人的页面刷新，只有行云流水的内容切换。
路由其实不难，需要多理解，掌握这些核心用法，你也能轻松搭建出结构清晰、体验流畅的 SPA 应用。下次再遇到路由相关的需求，不妨拿出这些 “导航法宝”，让你的项目像后台管理系统一样，在路由的世界里畅通无阻。
现在就用我的例子敲代码吧！
——转载自：风止何安啊