react18携带参数跳转路由

react18携带参数跳转路由

• 在 React 18 中，你可以使用 useNavigate 钩子来实现路由跳转，并使用 URL 参数来携带参数。
• 你可以在链接中以查询字符串的形式传递参数，并在目标组件中使用 useLocation 钩子来获取传递的参数。
• 以下是一个示例，演示了如何在 React 18 中跳转路由页面并携带参数：

// SourcePage.js
import {
    useNavigate } from 'react-router-dom';

function handleButtonClick() {
   
  const navigate = useNavigate();
  navigate('/target?foo=bar&baz=qux');
}

function SourcePage() {
   
  return (
    <button onClick={
   handleButtonClick}>跳转并传递参数</button>
  );
}

// TargetPage.js
import {
    useLocation } from 'react-router-dom';

function TargetPage() {
   
  const {
    search } = useLocation();
  const params = new URLSearchParams(search);
  const foo = params.get('foo');
  const baz = params.get('baz');

  return (
    <div>
      <h1>目标页面</h1>
      <p>foo: {
   foo}</p>
      <p>baz: {
   baz}</p>
    </div>
  );
}

• 在这个示例中，handleButtonClick 函数使用 useNavigate 钩子导航到目标页面，并在链接中传递了 foo 和 baz 两个参数。
• 在目标页面中，我们使用 useLocation 钩子从 URL 中获取查询字符串，并使用 URLSearchParams 类来解析参数。
• 最后，我们从解析后的参数中获取 foo 和 baz 参数，并将它们显示在页面中。