将值从路由传递到自定义属性

// 定义路由
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact }
];

// 在应用中使用路由
function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>

        <hr />

        <Switch>
          {routes.map((route, index) => (
            <Route
              key={index}
              path={route.path}
              exact={true}
              component={route.component}
            />
          ))}
        </Switch>
      </div>
    </Router>
  );
}

// 在组件中获取路由传递的值
function About(props) {
  const { location } = props;
  const { state } = location;

  return (
    <div>
      <h2>About</h2>
      <p>传递的值：{state.value}</p>
    </div>
  );
}

// 在其他组件中触发路由跳转并传递值
function Home() {
  const history = useHistory();

  const handleClick = () => {
    history.push({
      pathname: '/about',
      state: { value: 'Hello World' }
    });
  };

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