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

组件	作用描述	重要属性
`<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" /> ✅

五、扩展阅读推荐

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

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

六十天前端强化训练之第二十天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 视频教程

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

网站公告

今日签到

热门文章

最新发布