如何在从一个页面导航到另一个页面时在react hookrouter中传递状态或属性

Question

我尝试过hookrouter中的useRoutes，从一个页面导航到另一个页面，运行正常。我想用这条路线传递一些对象。我应该如何传递一个对象？我看过hookrouter的GitHub页面，但还是没看懂。我像navigate("/home",true,{name:"batman"});一样试过了，但没用。我该怎么做呢？

Answer 1

react-router-dom解决方案

如果使用button作为路由事件触发器：

import { Button } from '@material-ui/core';
import { Link } from 'react-router-dom';

<Button
  ...
  component={Link}
  to={{
    pathname: `yourRoutePath`,
    // write your custom state below
    state: {
      otherCustomState: value,
      // sample below
      prevPath: history.location.pathname,
    }
  }}
>
  next page
</Button>

用法

history.location.state.yourCustomState

更新：

hookrouter解决方案

传递URL参数:请参考文章here，不确定它是否符合您的要求

const routes = {
  '/user/:id': ({id}) => <User userId={id} />
}

传递隐式道具:参考passing-additional-data-to-route-functions文档

const routes = {
    '/' => () => (product) => <GeneralInfo product={product} />,
    '/details': () => (product) => <Techdetails product={product} />,
    '/buy': () => (product) => <BuyOptions product={product} />
    '/buy/:variant': ({variant}) => (product) => <Buy product={product} variant={variant} />
};

const ProductPage = ({id}) => {
    const [productObj, status] = useProduct(id);
    const match = useRoutes(routes);

    if(!match){
        return 'Page not found';
    }

    if(status.loading){
        return 'Loading product...';
    }

    return match(productObj);
};

Answer 2

您可以使用react-router-dom中的链接组件。

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

<Link to={`home/${obj.name}`}> Click here </Link>