如何在react-router-dom v5中使用Link传递和拦截数据_如何在方法调用中传递数据和使用用户输入_在swift 4中使用performSegue打开的消除页面时，如何在视图控制器和TableViewController之间传递数据？ - 腾讯云开发者社区

在React Router v5中，Link组件是用于在应用中创建导航链接的主要方式。你可以通过几种方式在Link组件中传递数据，以及拦截这些数据。

传递数据

1. 通过`state`属性传递数据

你可以使用Link组件的state属性来传递数据。这些数据可以在目标路由组件中通过props.location.state访问。

import { Link } from 'react-router-dom';

<Link to={{ pathname: '/destination', state: { data: 'Hello World' } }}>
  Go to Destination
</Link>

在目标组件中：

function Destination(props) {
  const data = props.location.state?.data;
  return <div>{data}</div>;
}

2. 通过URL参数传递数据

另一种方式是通过URL参数传递数据。这可以通过在to属性中拼接查询字符串来实现。

import { Link } from 'react-router-dom';

<Link to={`/destination?data=Hello%20World`}>Go to Destination</Link>

在目标组件中，你可以使用useLocation和useSearchParams钩子来获取查询参数。

import { useLocation, useSearchParams } from 'react-router-dom';

function Destination() {
  const [searchParams] = useSearchParams();
  const data = searchParams.get('data');
  return <div>{data}</div>;
}

拦截数据

如果你想在导航到新页面之前拦截数据，可以使用useEffect钩子和history对象。

import { useEffect } from 'react';
import { useHistory, useLocation } from 'react-router-dom';

function App() {
  const history = useHistory();
  const location = useLocation();

  useEffect(() => {
    const unlisten = history.listen((location) => {
      // 在这里处理拦截逻辑
      console.log('Navigating to:', location.pathname);
      // 如果需要阻止导航，可以调用 history.goBack() 或 history.push('/some-other-route')
    });

    return () => {
      unlisten();
    };
  }, [history]);

  return (
    // ...你的路由配置
  );
}