React 路由基础与参数传递指南

在 React 应用程序中，路由是管理页面导航和 URL 更改的重要部分。React Router 是一个广泛使用的库，它为构建单页应用程序提供了一个直观且强大的解决方案。本文将深入探讨 React Router 的基本使用以及如何有效地传递路由参数。

React Router 基本使用

要开始使用 React Router，首先需要安装该包：

npm i react-router-dom@5.3.0

该库提供了以下核心组件：

• <BrowserRouter>：包含应用程序中所有路由的根组件。
• <Route>：定义特定 URL 模式下的页面组件。
• <Link>：用于在应用程序中的页面之间导航的链接。

以下是一个简单的 React Router 示例：

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

const App = () => (
  <BrowserRouter>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
    </ul>

    <Route path="/" exact>
      <Home />
    </Route>
    <Route path="/about">
      <About />
    </Route>
  </BrowserRouter>
);

这个示例创建一个 <BrowserRouter> 组件，其中包含两个 <Route> 组件。每个 <Route> 定义了一个 URL 模式，当用户访问该模式时，将渲染相应的页面组件（在本例中为 <Home> 和 <About>）。

路由传参

在 React Router 中，可以通过 <Route> 组件的 render 属性传递路由参数。render 属性接受一个函数，该函数接收两个参数：props 和 history。props 对象包含当前路由匹配的所有信息，包括路由参数。

以下示例演示如何传递路由参数：

const Profile = ({ match }) => {
  const { id } = match.params;
  return <h1>User ID: {id}</h1>;
};

const App = () => (
  <BrowserRouter>
    <ul>
      <li>
        <Link to="/profile/123">User 123</Link>
      </li>
      <li>
        <Link to="/profile/456">User 456</Link>
      </li>
    </ul>

    <Route path="/profile/:id">
      <Profile />
    </Route>
  </BrowserRouter>
);

在上面的示例中，<Route> 组件的 path 属性使用了一个参数化模式 /:id。这表明该路由将匹配任何以 /profile/ 开头的 URL，后跟一个动态 ID 参数。当用户访问此模式下的 URL 时，将渲染 <Profile> 组件，并且可以通过 match.params 访问路由参数。

总结

React Router 是一个强大的库，用于构建 React 应用程序的路由。它提供了灵活和易于使用的功能来管理页面导航和 URL 更改。本文介绍了 React Router 的基本使用，以及如何使用路由参数在应用程序的不同部分传递数据。通过遵循这些准则，开发人员可以创建高效且用户友好的单页应用程序。