React Router v6路由链接传递参数详解
React Router v6是一个流行的 React 路由库，它允许您在单页面应用程序中管理应用程序的路由。在 React Router v6 中，您可以使用useNavigate钩子函数来创建路由链接，并使用useParams和useSearchParams钩子函数来传递参数。
下面是一个示例，演示如何在React Router v6中传递参数：
import React from 'react';                                                jsx
import { useNavigate } from 'react-router-dom';
function UserProfile() {
  let navigate = useNavigate();
  let userId = 3; // 假设这是用户ID
  // 传递参数
  navigate('/profile', { state: { userId } });
  return (
    <div>
      <h2>User Profile</h2>
      <p>User ID: {userId}</p>
    </div>
  );
}
在上面的示例中，我们使用useNavigate钩子函数创建了一个名为navigate的函数，它用于导航到新的路由。然后，我们传递了一个对象作为第二个参数，其中包含一个名为state的属性，该属性包含我们想要传递的参数。在这种情况下，我们传递了一个名为userId的参数。
在目标组件中，您可以使用useParams或useSearchParams钩子函数来获取传递的参数。例如：
import React from 'react';                                                jsx
import { useParams } from 'react-router-dom';
function Profile() {
react router如何使用  let { userId } = useParams(); // 从 URL 中获取参数
  return (
    <div>
      <h2>User Profile</h2>
      <p>User ID: {userId}</p>
    </div>
  );
}
在上面的示例中，我们使用useParams钩子函数从 URL 中获取参数。在这种情况下，我们使用解构赋值来提取userId参数。如果您想要从查询参数中获取参数，请使用useSearchParams钩子函数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。