六十天前端强化训练之第二十天React Router 基础详解

=====欢迎来到编程星辰海的博客讲解======

看完可以给一个免费的三连吗，谢谢大佬！

目录

一、核心概念

1.1 核心组件

1.2 路由模式对比

二、核心代码示例

2.1 基础路由配置

2.2 动态路由示例

2.3 嵌套路由实现

2.4 完整示例代码

三、关键功能实现效果

四、学习要点总结

4.1 核心概念

4.2 最佳实践

4.3 常见问题

五、扩展阅读推荐

5.1 官方资源

5.2 优质文章

5.3 视频教程

六、实践案例：电商网站路由设计

一、核心概念

React Router 是 React 生态中最流行的路由解决方案，提供声明式的路由配置和导航功能，包含三个核心包：

1. react-router：路由核心库
2. react-router-dom：Web 专用路由库
3. react-router-native：React Native 专用路由

1.1 核心组件

1.2 路由模式对比

JAVASCRIPT

// 1. BrowserRouter（推荐）
https://example.com/about

// 2. HashRouter（兼容旧浏览器）
https://example.com/#/about

二、核心代码示例

2.1 基础路由配置

JSX

// App.js
import { 
  BrowserRouter,
  Routes,
  Route,
  Link,
  Outlet
} from 'react-router-dom';

// 页面组件
function Home() { return <h2>首页</h2> }
function About() { return <h2>关于我们</h2> }

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

2.2 动态路由示例

JSX

// 产品详情页
function ProductDetail() {
  const { id } = useParams();
  return <h2>产品ID: {id}</h2>;
}

// 路由配置
<Routes>
  <Route path="/products/:id" element={<ProductDetail />} />
</Routes>

2.3 嵌套路由实现

JSX

// 用户模块布局
function UserLayout() {
  return (
    <div>
      <h3>用户中心</h3>
      <Outlet />  {/* 子路由渲染位置 */}
    </div>
  );
}

// 路由配置
<Route path="/user" element={<UserLayout />}>
  <Route index element={<Dashboard />} />
  <Route path="profile" element={<Profile />} />
  <Route path="orders" element={<OrderList />} />
</Route>

2.4 完整示例代码

JSX

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

// 页面组件
function Home() { return <h2>首页</h2> }
function About() { return <h2>关于我们</h2> }
function ProductList() {
  return (
    <div>
      <h2>产品列表</h2>
      <ul>
        {[1,2,3].map(id => (
          <li key={id}>
            <Link to={`/products/${id}`}>产品{id}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
function ProductDetail() {
  const { id } = useParams();
  return <h2>产品详情：{id}</h2>;
}
function NotFound() { return <h2>404 页面不存在</h2> }

function App() {
  return (
    <BrowserRouter>
      <nav style={{ padding: 20, background: '#eee' }}>
        <Link to="/" style={{ marginRight: 20 }}>首页</Link>
        <Link to="/about" style={{ marginRight: 20 }}>关于</Link>
        <Link to="/products">产品中心</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<ProductList />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/old-about" element={<Navigate to="/about" replace />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

三、关键功能实现效果

这里我还存在问题，先给大家放大概图看看，到时候我还要再试试

1. 基础导航切换
2. 动态路由参数展示
3. 嵌套路由层级显示
4. 编程式导航跳转
5. 404页面处理

四、学习要点总结

4.1 核心概念

1. 路由配置必须包裹在<BrowserRouter>中
2. <Routes>自动选择最佳匹配路由
3. element属性接收React组件（v6新特性）
4. 动态参数使用:paramName语法
5. 索引路由使用index属性标记

4.2 最佳实践

1. 使用<Link>代替<a>标签避免页面刷新
2. 嵌套路由配合<Outlet>实现布局复用
3. useNavigate实现编程式导航
4. useLocation获取路由状态信息
5. loader和action处理数据加载（v6.4+）

4.3 常见问题

JAVASCRIPT

// 错误：直接使用<a>标签
<a href="/about">关于</a> ❌

// 正确：使用Link组件
<Link to="/about">关于</Link> ✅

// 路由匹配优先级问题
<Route path="users/:id" />
<Route path="users/new" /> ❌ 顺序错误

// 正确顺序
<Route path="users/new" />
<Route path="users/:id" /> ✅

五、扩展阅读推荐

5.1 官方资源

1. React Router 官方文档
2. GitHub 仓库
3. 官方示例集合

5.2 优质文章

1. React Router v6 完全指南
2. 深度解析路由鉴权方案
3. 路由懒加载最佳实践

5.3 视频教程

1. React Router v6 官方教学视频
2. 全栈路由配置指南
3. 实战电商网站路由设计

六、实践案例：电商网站路由设计

JSX

// routes.js
const routes = [
  {
    path: '/',
    element: <MainLayout />,
    children: [
      { index: true, element: <HomePage /> },
      { path: 'products', element: <ProductListPage /> },
      { path: 'products/:slug', element: <ProductDetailPage /> },
      { path: 'cart', element: <CartPage /> },
      { 
        path: 'dashboard',
        element: <RequireAuth><DashboardLayout /></RequireAuth>,
        children: [
          { index: true, element: <OrderHistory /> },
          { path: 'settings', element: <AccountSettings /> }
        ]
      },
      { path: '*', element: <NotFoundPage /> }
    ]
  }
];

// 路由守卫组件
function RequireAuth({ children }) {
  const auth = useAuth();
  const location = useLocation();
  
  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  return children;
}

通过本教程，大家可以掌握React Router的核心用法，建议结合官方文档和实际项目进行实践练习。路由配置需特别注意组件层级和匹配顺序，动态路由参数处理要考虑边界情况，嵌套路由是实现复杂布局的利器。