如何在react.js中使用reach路由器将数据从一个页面传递到另一个页面

npm install @reach/router

import { navigate } from '@reach/router';

function HomePage() {
  const handleClick = () => {
    const data = { name: 'John', age: 25 };
    navigate('/about', { state: data });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
}

function AboutPage(props) {
  const { state } = props.location;

  return (
    <div>
      <h1>About Page</h1>
      <p>Name: {state.name}</p>
      <p>Age: {state.age}</p>
    </div>
  );
}