从 “翻页书” 到 “魔术盒”：React 路由凭啥如此丝滑？

置顶

精

活动

前言

想象一下：你打开一个网站，从 “首页” 点到 “个人中心”，页面连个白屏都没有 —— 这不是魔法，是 单页应用（SPA） 的 “小心机”。而让 SPA 实现 “网址变、内容换” 的幕后大佬，就是今天要唠的 React Router。我今天以一个后台管理系统来全方位的拆解路由的细节~

想要详细React Router资料可以在这里找到：

reactrouter.com

一、从 “多页翻书” 到 “单页变魔术”

早年间的网站是 “多页应用”：点个链接跳转到新 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 (
         {/* 所有路由配置都得包在它里面 */}
            
  
                {/* 这里塞各种路由规则 */}
            
  
        
 
    )
}

2. Routes + Route：给 “组件” 贴 “网址标签”

Routes是 “路由出口”，Route是 “网址→组件” 的标签贴。比如我们的后台系统，给 「登录页」「首页」 贴标签：

 
    {/* 根路径直接跳转到登录页 */}
    
  } />
    
    {/* 访问/login → 显示Login组件（就是我们写的登录界面） */}
    
  } />
    
    {/* 访问/home → 显示Home组件（首页），同时它是二级路由的容器 */}
    
  }>
        {/* 二级路由：/home/class → 显示Class组件 */}
        
  } />
        {/* 二级路由：/home/leetcode → 显示LeetCode组件 */}
        
  } />
    
    
    {/* 404页面：匹配不到的网址都显示这个 */}
    
  NOT FOUND} />

  
 

登录首页：

点击登录（自动进入/home/class）：

像不像给每个组件发了张 “网址门票”？拿着/login门票，就能进登录页的门？

机-会

技术大厂，前端-后端-测试，新一线和一二线城市等地均有机-会，感兴趣可以试试。待遇和稳定性都不错~

3. Outlet：二级路由的 “展示窗口”

首页Home是个 “大容器”，里面要放class和leetcode这些 “子页面”——Outlet就是这个 “子页面展示窗口”。

看Home.jsx的代码：

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

export default function Home() {
    return (
        
 
            
  后台管理系统
  
            
  
                
   
                    {/* 侧边栏导航，点了跳转到二级路由 */}
                    
    

     课程
                    
    

     算法
                
   
                
   
                    {/* 二级路由的内容就显示在这里！ */}
                    
                
   
            
  
        
 
    )
}

点击算法进入/home/leetcode：

Outlet就像电视屏幕，点 “课程” 就播 《课程频道》，点 “算法” 就切 《LeetCode 频道》。

4. Link：SPA 的 “无痛跳转链接”

传统的标签跳转是 “翻页”，Link是 “换内容”—— 点它网址变，但页面不刷新，就像遥控器换台。

  课程

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

export default function Login() {
    const navigate = useNavigate() // 拿到跳转函数
    
    const login = () => {
        // 登录逻辑...
        navigate('/home') // 登录成功，跳转到首页！
    }
    
    return (
        
  
            [removed]
            [removed]
            登录
        
  
    )
}