详解 React 中的路由跳转及传参方式-JavaScript中文网-JavaScript教程资源分享门户

React 是一个非常流行的前端框架，它提供了一种非常方便的方式来构建 SPA（Single Page Application）应用程序。在 React 中，路由是非常重要的一部分，因为它可以让我们在应用程序中实现不同页面之间的切换。本文将详细介绍 React 中的路由跳转及传参方式。

React Router

React Router 是一个非常流行的 React 路由库，它提供了一种方便的方式来实现路由跳转。它支持多种路由类型，包括 HashRouter、BrowserRouter、MemoryRouter 等。在这里，我们将使用 BrowserRouter 作为我们的路由器。

安装

要使用 React Router，我们需要先安装它。可以使用 npm 或 yarn 进行安装：

npm install react-router-dom

或

yarn add react-router-dom

使用

在使用 React Router 之前，我们需要先导入它。可以使用以下代码导入：

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

上面的代码导入了 BrowserRouter、Route 和 Link 组件。BrowserRouter 是我们的路由器，Route 用于定义路由匹配规则，Link 用于定义导航链接。

在使用 BrowserRouter 之前，我们需要将整个应用程序包装在 BrowserRouter 组件中。可以使用以下代码：

<BrowserRouter>
  <App />
</BrowserRouter>

上面的代码将应用程序包装在 BrowserRouter 组件中。现在我们可以开始定义路由规则了。可以使用 Route 组件定义路由规则。例如，以下代码定义了一个路由规则，将 /home 映射到 Home 组件：

<Route path="/home" component={Home} />

上面的代码定义了一个路由规则，将 /home 映射到 Home 组件。当用户访问 /home 时，将渲染 Home 组件。

现在我们可以使用 Link 组件定义导航链接。例如，以下代码定义了一个导航链接，将用户导航到 /home：

<Link to="/home">Home</Link>

上面的代码定义了一个导航链接，将用户导航到 /home。当用户点击链接时，将跳转到 /home。

跳转方式

在 React Router 中，有两种方式可以实现路由跳转：声明式导航和编程式导航。

声明式导航

声明式导航是一种在 JSX 中使用 Link 组件的方式，可以让用户单击链接时自动导航到目标页面。例如，以下代码定义了一个导航链接，将用户导航到 /home：

<Link to="/home">Home</Link>

上面的代码定义了一个导航链接，将用户导航到 /home。当用户单击链接时，将自动导航到 /home。

编程式导航

编程式导航是一种在 JavaScript 代码中使用编程方式实现路由跳转的方式。例如，以下代码在用户单击按钮时使用编程方式实现了路由跳转：

function handleClick() {
  history.push("/home");
}

<button onClick={handleClick}>Go Home</button>

上面的代码在用户单击按钮时使用编程方式实现了路由跳转。当用户单击按钮时，将调用 handleClick 函数，并使用 history.push("/home") 实现路由跳转。

传递参数

在实际开发中，我们经常需要在不同页面之间传递参数。在 React Router 中，有多种方式可以实现参数传递。

路径参数

路径参数是一种在 URL 中传递参数的方式。例如，以下代码定义了一个路由规则，将 /user/:id 映射到 User 组件：

<Route path="/user/:id" component={User} />

上面的代码定义了一个路由规则，将 /user/:id 映射到 User 组件。在 /user/1 中，1 是一个参数，可以在 User 组件中通过 props.match.params.id 获取。

查询参数

查询参数是一种在 URL 中传递参数的方式。例如，以下代码定义了一个导航链接，将用户导航到 /user?id=1：

<Link to={{ pathname: "/user", search: "?id=1" }}>User</Link>

上面的代码定义了一个导航链接，将用户导航到 /user?id=1。可以在 User 组件中通过 props.location.search 获取查询参数。

状态对象

状态对象是一种在路由之间传递数据的方式。例如，以下代码使用状态对象传递了一个名为 name 的参数：

history.push("/user", { name: "John" });

上面的代码使用状态对象传递了一个名为 name 的参数。可以在 User 组件中通过 props.location.state 获取状态对象。

示例代码

下面是一个完整的示例代码，演示了如何使用 React Router 实现路由跳转及参数传递：

// www.javascriptcn.com code example
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";

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

function User(props) {
  const { match, location } = props;
  const { id } = match.params;
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get("name");
  const state = location.state || {};

  return (
    <div>
      <h1>User</h1>
      <p>ID: {id}</p>
      <p>Name: {name}</p>
      <p>Age: {state.age}</p>
    </div>
  );
}

function App() {
  function handleClick() {
    history.push("/user/1", { age: 18 });
  }

  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to={{ pathname: "/user", search: "?id=1&name=John" }}>
              User
            </Link>
          </li>
        </ul>
      </nav>
      <button onClick={handleClick}>Go User</button>
      <Route path="/" exact component={Home} />
      <Route path="/user/:id" component={User} />
    </div>
  );
}

function Root() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

export default Root;

上面的代码演示了如何使用 React Router 实现路由跳转及参数传递。在 App 组件中，我们定义了两个导航链接和一个按钮，分别使用了不同的方式实现了路由跳转和参数传递。在 User 组件中，我们演示了如何获取路径参数、查询参数和状态对象。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d54d0ea941bf71349cdec2

详解 React 中的路由跳转及传参方式