Как передать состояние или реквизит в реагирующем крюковике при переходе с одной страницы на другую

Question

Я пробовал useRoutes из hookrouter перехода с одной страницы на другую, которая работает нормально. И я хочу передать некоторые объекты по этому маршруту. Как я должен передать объект? Я прочитал hookrouter страницу GitHub, все еще я не получил это. Я пытался как navigate("/home",true,{name:"batman"});, это не помогает. Как я могу это сделать?

Answer 1

Решение для Reaction-router-dom

Если вы используете кнопку в качестве триггера события маршрута:

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: см. Статью здесь , не уверен, соответствует ли это вашему требованию

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

Передать неявные реквизиты: см. Документ Передача дополнительных данных в функции маршрута

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

Компонент ссылки можно использовать в реакции-маршрутизаторе-дом.

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

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