如何在react-router-dom v5中使用Link传递和拦截数据

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>;
}

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

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

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

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

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 (
    // ...你的路由配置
  );
}