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

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

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

一、核心概念

[1.1 核心组件](#1.1 核心组件)

[1.2 路由模式对比](#1.2 路由模式对比)

二、核心代码示例

[2.1 基础路由配置](#2.1 基础路由配置)

[2.2 动态路由示例](#2.2 动态路由示例)

[2.3 嵌套路由实现](#2.3 嵌套路由实现)

[2.4 完整示例代码](#2.4 完整示例代码)

三、关键功能实现效果

四、学习要点总结

[4.1 核心概念](#4.1 核心概念)

[4.2 最佳实践](#4.2 最佳实践)

[4.3 常见问题](#4.3 常见问题)

五、扩展阅读推荐

[5.1 官方资源](#5.1 官方资源)

[5.2 优质文章](#5.2 优质文章)

[5.3 视频教程](#5.3 视频教程)

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

一、核心概念

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

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

1.1 核心组件

组件	作用描述	重要属性
`<BrowserRouter>`	HTML5 history 模式路由容器	basename
`<Routes>`	路由匹配容器组件	-
`<Route>`	定义路由映射规则	path, element
`<Link>`	声明式导航组件	to, state
`<NavLink>`	带激活状态的 Link	className, style
`<Navigate>`	编程式导航组件	to, replace
`<Outlet>`	嵌套路由占位符	-

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;

三、关键功能实现效果

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

$首页$ $关于$ $产品$ $用户中心$ $错误链接$
🏠 首页
欢迎来到网站主页

OR

📦 产品列表
• 产品 A
• 产品 B
• 产品 C
OR
👤 用户中心
$仪表盘$ $个人资料$
📊 用户仪表盘
OR
⛔ 404 页面未找到
请检查您访问的URL是否正确

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

四、学习要点总结

4.1 核心概念

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

4.2 最佳实践

使用<Link>代替<a>标签避免页面刷新
嵌套路由配合<Outlet>实现布局复用
useNavigate实现编程式导航
useLocation获取路由状态信息
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 官方资源

5.2 优质文章

5.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的核心用法，建议结合官方文档和实际项目进行实践练习。路由配置需特别注意组件层级和匹配顺序，动态路由参数处理要考虑边界情况，嵌套路由是实现复杂布局的利器。