React Router 路由配置完全指南：从基础到高级用法-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01149/article/details/148324550

React Router 路由配置完全指南：从基础到高级用法

react-router remix-run/react-router: 是一个开源的 React 路由库，用于构建 React 应用的路由系统。它提供了一套简洁的 API 和多种路由模式，可以帮助开发者快速实现路由功能，提高应用的可维护性。特点包括易于使用、模块化设计、支持多种路由模式等。项目地址: https://gitcode.com/gh_mirrors/re/react-router

前言

在现代单页应用(SPA)开发中，路由管理是核心功能之一。React Router 作为 React 生态中最流行的路由解决方案，提供了强大而灵活的路由配置能力。本文将深入讲解 React Router 的路由配置方式，帮助开发者掌握从基础到高级的各种路由模式。

基础路由配置

React Router 的核心是 <Routes> 和 <Route> 组件，它们将 URL 路径映射到对应的 React 组件。

import { BrowserRouter, Routes, Route } from "react-router";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="about" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  );
}

这种声明式路由配置方式直观易懂，path 属性指定匹配的 URL 路径，element 属性指定渲染的组件。

嵌套路由

React Router 支持强大的嵌套路由功能，让 UI 结构与路由结构保持一致：

<Routes>
  <Route path="dashboard" element={<DashboardLayout />}>
    <Route index element={<DashboardHome />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

关键点：

子路由的路径会自动继承父路由路径
子路由组件通过父路由中的 <Outlet /> 渲染
父路由通常作为布局容器

function DashboardLayout() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet /> {/* 这里渲染子路由 */}
    </div>
  );
}

布局路由

布局路由是一种特殊的路由，它没有自己的 path，仅用于组织子路由的布局结构：

<Routes>
  <Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
  </Route>
</Routes>

这种模式非常适合需要在多个路由间共享相同布局的场景，如认证页面、管理后台等。

索引路由

索引路由(index)是当父路由路径被精确匹配时渲染的默认子路由：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
  </Route>
</Routes>

特点：

当访问 / 时，<Home /> 会渲染在 <Layout /> 的 <Outlet /> 中
索引路由不能有子路由
相当于传统路由中的默认路由或空子路由

动态路由参数

React Router 支持通过冒号前缀(:param)定义动态路由参数：

<Route path="products/:id" element={<ProductDetail />} />

在组件中可以通过 useParams 获取参数：

import { useParams } from "react-router";

function ProductDetail() {
  const { id } = useParams();
  // 使用 id 获取产品数据...
}

高级用法：

多个参数：/category/:cid/product/:pid
可选参数：/docs/:lang? 中的 lang 是可选的
通配符：/files/* 匹配 /files/ 后的任意路径

路由链接

React Router 提供了两种导航组件：

<Link> - 基本导航链接
<NavLink> - 支持活动状态样式的链接

import { NavLink } from "react-router";

function Navigation() {
  return (
    <nav>
      <NavLink
        to="/"
        className={({ isActive }) => isActive ? "active" : ""}
      >
        Home
      </NavLink>
    </nav>
  );
}

NavLink 特别适合导航菜单，可以轻松实现当前选中项的高亮效果。