React 学习 react-router-dom，玩转前端路由的第一步

说实话，刚接触 React 的时候，我也是个“切图仔”。

那会儿只会写 HTML、CSS，点几下按钮就想跳页面。

结果一点链接就白屏，用户体验直接掉进坑里。

后来才发现，原来前端也Neng管路由，这才叫真·前端老司机。

为什么要学 react-router-dom？

先别急着把它当成工具库kan待，咱们先聊聊它背后的理念。

SPA把所有页面dou装进一个 JS 包里。

Ru果不管路由，那每次点击dou只Neng靠刷新整个文档。

这时候 History API + Router 组合上场，页面局部geng新，却还Neng保持 URL 的可读性。

简言之，你Ke以在不刷新的情况下让地址栏像真的一样变动。

基础概念：BrowserRouter vs HashRouter

BrowserRouter 用的是 HTML5 History，URL kan起来hen干净。

HashRouter 则在 URL 后面加 #，兼容性geng好但kan起来有点“丑”。

大多数项目推荐 BrowserRouter，除非你在 Electron 或者纯静态服务器上玩耍。

Zui常用的组件和 Hook

import { Routes, Route, Link, Navigate } from 'react-router-dom';

import { useNavigate, useParams, useLocation } from 'react-router-dom';

NAVIGATION

关于我们

NAVIGATE

// 在事件回调里使用
const navigate = useNavigate;
function handleSubmit {
  // ...业务逻辑
  navigate;
}

动态路由：让 URL 承载数据

电商网站常见 /product/12345 这种写法，就是动态路由的典型。

// pages/ProductDetail.jsx
import { useParams } from 'react-router-dom';
export default function ProductDetail {
  const { productId } = useParams; // 解构出来的就是 URL 参数
  return (
    

      商品 ID：{productId}
      {/* 根据 ID 拉取商品信息 */}
    
  );
}

嵌套路由与 Outlet：画中画的妙用

后台系统左侧菜单、顶部导航固定不动，只换中间内容，这时候就需要嵌套路由了。

// layouts/AdminLayout.jsx
import { Outlet, NavLink } from 'react-router-dom';
export default function AdminLayout {
  return (
    

      
      

        {/* 子路由渲染位置 */}
        
      
    
  );
}

进阶技巧：懒加载 + LoadingFallback

说实话，Ru果你把所有页面一次性打包，那首屏加载时间直接爆炸。

React.lazy + Suspense Neng帮你按需加载模块，只在真正需要时才请求对应 JS 文件。

// router/index.jsx
import { lazy, Suspense } from 'react';
import LoadingFallback from '../components/LoadingFallback';
const Home = lazy => import);
const About = lazy => import);
const Dashboard = lazy => import);
export default function RouterConfig {
  return (
    }>
      
        } />
        } />
        } />
        {/* 捕获所有未匹配路由 */}
        } />
      
    
  );
}

自定义 Loading 动画

/* components/LoadingFallback/index.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
}
.spinner {
  width: 60px;
  height: 60px;
  position: relative;
}
.circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin1 .9s linear infinite;
}
.circleInner {
  width: calc;
  height: calc;
 _top_:6px;
/* typo intentional */
left:6px;}
.circleInner{
border-top-color:#e74c3c;}
@keyframes spin1{
from{transform rotate;}
to{transform rotate;}}
.text{
margin-top:.8rem;color:#555;font-size:1rem;}

权限守卫：闲人免进的门卫组件

CFA是每个项目必备的安全层，不然谁douNeng随意访问后台接口啊！哈哈。

// components/ProtectRoute.jsx
import { Navigate } from 'react-router-dom';
export default function ProtectRoute {
   const isLoggedIn = localStorage.getItem === 'true';
   if  {
     // 没登录直接踢回登录页，加 replace 防止历史堆积
     return ;
   }
   return children ;
}

使用示例：把守卫挂在需要保护的路由上吧！

// router/index.jsx 中的一段
&&&&&&&&&a? ? ? ? ? ????
} />
// 注意这里没有多余的数字列表，只是自然嵌套。

重定向与 replace：防止历史陷阱

项目改版后旧链接还在外面流传怎么办？用 Navigate Zuo一次性跳转就行啦。

// pages/OldRedirect.jsx
import { Navigate } from 'react-router-dom';
export default function OldRedirect {
   return ;
}

应该是：

} />

replace hen重要，它告诉浏览器把当前记录换掉，用户点后退不会卡死循环。哈哈哈，这招老手们dou懂，你也赶紧记住吧！

手写 NavLink 高亮：自定义 active 类名

NAVLINK 自带 activeClassName，但有时候想要geng细粒度控制，就得自己来一套逻辑。

// hooks/useActiveLink.js
import { useResolvedPath, useMatch } from 'react-router-dom';
export default function useActive {
   const resolved = useResolvedPath;
   const match = useMatch;
   return match ? 'active' : '';
}

// 在组件里使用
import useActive from '../hooks/useActiveLink';
function Sidebar{
   const activeHome = useActive;
   const activeAbout = useActive;
   return (
     )
}

小结：从切图仔到前端高手的路径图

① 把 BrowserRouter 包裹根组件；

② 用 Routes + Route 定义页面结构；

③ 动态路由配合 useParams 把数据塞进 URL；

④ 嵌套路由配合 Outlet 打造布局框架；

⑤ 懒加载+LoadingFallback 提升首屏速度；

⑥ ProtectRoute 实现登录拦截；

⑦ Navigate+replace Zuo优雅重定向。

说实话，这套流程只要练几遍，你就Neng自信地说：“我不是普通切图仔，我是会管理 SPA 路径的大佬！” 哈哈~ 咱就是说多写多练，自然就Neng把这些概念烂熟于心。你懂的，你也Ke以把这些技巧搬到自己的项目里让你的页面秒开、无白屏、权限安全，一气呵成。祝你玩得开心，早日成为前端高手！ 🎉🚀

---