React路由传递参数的全面指南

2023-10-15 23:03:34

引言

React Router是一个流行的库，用于在React应用程序中管理路由和导航。它允许您创建动态路由，根据URL中的参数渲染不同的组件。本指南将提供一个全面概述，了解如何使用React路由传递参数，包括动态路由、URL参数和导航。

动态路由

动态路由允许您在路由路径中使用变量，从而可以根据URL中的参数渲染不同的组件。例如，考虑以下动态路由：

/product/:productId

在这里，:productId是路由中的一个变量，它将匹配URL中的任何值。例如，以下URL将匹配此路由：

/product/123

在React中，您可以使用useParams钩子访问动态路由中的参数。例如：

import { useParams } from "react-router-dom";

const ProductPage = () => {
  const params = useParams();
  const productId = params.productId;

  // 使用productId渲染组件
  return <div>{productId}</div>;
};

URL参数

除了动态路由之外，您还可以使用URL参数传递参数。URL参数是附加到URL末尾的一组键值对，以问号(?)开头。例如：

/product?color=red&size=large

在React中，您可以使用useLocation钩子访问URL参数。例如：

import { useLocation } from "react-router-dom";

const ProductPage = () => {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  // 使用URL参数渲染组件
  const color = queryParams.get("color");
  const size = queryParams.get("size");

  return <div>{color} {size}</div>;
};

导航

React Router还提供了用于导航的API。您可以使用useNavigate钩子来编程方式导航到其他路由。例如：

import { useNavigate } from "react-router-dom";

const ProductPage = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/product/123");
  };

  // 渲染按钮以导航到其他路由
  return <button onClick={handleClick}>Go to Product 123</button>;
};