React Router基础与动态路由

React Router 是 React 应用中用于实现路由功能的库，提供了丰富的工具来管理页面导航和 URL 状态。通过使用 React Router，可以轻松地创建单页应用程序（SPA），并支持动态路由配置。

本章将介绍 React Router 的基本使用方法和动态路由的实现。

1. React Router 基础

1.1 安装 React Router

在使用 React Router 前，需要先安装相关依赖包：

npm install react-router-dom

1.2 路由的基本结构

React Router 的核心组件包括：

  • <BrowserRouter>：用于包裹整个应用，提供路由功能。
  • <Routes>：用于定义一组路由规则。
  • <Route>：用于定义单个路由。

示例：基本路由配置

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

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

在上述示例中：

  • <BrowserRouter> 包裹了整个应用。
  • <Routes> 定义了两条路由规则，分别对应/路径和/about路径。
  • <Link> 用于创建导航链接。

1.3 默认路由和 404 路由

React Router 支持定义默认路由和未匹配路径的 404 页面。

示例：默认路由与 404 页面

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function NotFound() {
  return <h1>404: Page Not Found</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

在此示例中：

路由规则path="*"用于匹配所有未定义的路径，作为 404 页面。

2. 动态路由

动态路由允许根据 URL 的参数渲染不同的页面内容，是构建动态页面的重要功能。

2.1 使用动态路由参数

动态路由通过在路径中定义参数来实现，例如 :id 表示一个动态参数。

示例：动态路由参数

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

function Product() {
  const { id } = useParams(); // 获取动态参数
  return <h1>Product ID: {id}</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </Router>
  );
}

export default App;

在此示例中：

  • 路由路径 /product/:id 中的:id 是一个动态参数。
  • 在 Product 组件中，通过 useParams 钩子获取动态参数。 访问 /product/123 会显示 Product ID: 123。

2.2 嵌套路由

React Router 支持嵌套路由，用于处理页面的子路由。

示例：嵌套路由

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Outlet, Link } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="profile">Profile</Link> | <Link to="settings">Settings</Link>
      </nav>
      <Outlet /> {/* 用于渲染嵌套路由的组件 */}
    </div>
  );
}

function Profile() {
  return <h2>Profile Page</h2>;
}

function Settings() {
  return <h2>Settings Page</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

在此示例中：

  • <Dashboard> 组件是一个父路由，其子路由通过 <Outlet> 渲染。
  • 子路由定义在父路由的 <Route> 标签中。 访问 /dashboard/profile 显示 Profile Page，访问 /dashboard/settings 显示 Settings Page。

3. 路由守卫与重定向

在某些情况下，需要限制访问某些路由或进行重定向。

3.1 路由守卫

可以通过在路由组件中添加逻辑，限制未授权用户访问特定页面。

示例：简单路由守卫

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

function Dashboard() {
  return <h1>Dashboard</h1>;
}

function App() {
  const isAuthenticated = false; // 模拟认证状态

  return (
    <Router>
      <Routes>
        <Route
          path="/dashboard"
          element={isAuthenticated ? <Dashboard /> : <Navigate to="/" />}
        />
        <Route path="/" element={<h1>Home Page</h1>} />
      </Routes>
    </Router>
  );
}

export default App;

在此示例中：

如果用户未登录，将被重定向到主页。

4. 小结

  • 基本路由：通过 <BrowserRouter>、<Routes> 和 <Route> 组件定义应用的导航结构。
  • 动态路由：使用路径参数（例如 :id）实现动态页面内容。
  • 嵌套路由：通过 <Outlet> 支持嵌套的页面结构。
  • 路由守卫与重定向：实现基于条件的访问控制和 URL 重定向。

React Router 是实现复杂导航功能的强大工具，掌握它可以大幅提高 React 应用的开发效率。

Last Updated::