How to pass state or props in react hookrouter while navigate from one page to another page

Question

I have tried useRoutes from hookrouter navigating from one page to another page which is working fine. And I want to pass some objects with that route. How should I pass an object? I have read hookrouter GitHub page, still I didn't get it. I tried like navigate("/home",true,{name:"batman"});, it doesn't help. How can I do this?

Answer 1

Solution for react-router-dom

If you use button as route event trigger:

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>

Usage

history.location.state.yourCustomState

Update:

Solution for hookrouter

Pass URL parameters: Refer to article here, not sure whether it fits your demand

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

Pass implicit props: Refer to document of 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);
};