React - Pass data in React Router

Question

So, I'm having a hard time passing data between two unrelated components. I have this code below, but I don't know how to receive it from the other component

<Button
   className='search__button'
   variant="contained"
   color="primary"
   size="large"
   component={Link}
   to={{
     pathname: "/home",
     state: { data: results }
   }}
>

I want to pass the variable "results" which is a Map of a string and an object Book (Map<string, Book>) to a component. Basically, my question is, how do I retrieve data in my Home component?

Thank you

store it on the global state. you can get idea form https://stackoverflow.com/a/52173629/8928037 — Kaumadie Prabashinie
– Kaumadie Prabashinie, Commented Apr 13, 2021 at 4:17
You can get it from location using a hook reactrouter.com/web/api/Hooks/uselocation you can also see an example of this in the auth example reactrouter.com/web/example/auth-workflow — Alexander Staroselsky
– Alexander Staroselsky, Commented Apr 13, 2021 at 4:45

Drew Reese · Accepted Answer · 2021-04-13 04:50:53Z

1

When sending state with route transitions you can access it on the location object of the receiving route in a few different ways:

In the case of functional components you can use the useLocation hook.
```
 const { state } = useLocation();
 // access state.data
```
If the component is rendered by a Route on the render, component, or children prop then route props will be passed to the component. location will be a prop. Or you can decorate the component with the withRouter have have the route props of the closest matching Route passed as props.
```
 const { location: { state } } = this.props;
 // access state.data
```
or
```
 const { location: { state } } = props;
 // access state.data
```

answered Apr 13, 2021 at 4:50

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Patrick Youssef Over a year ago

Thank you. I receive the data but not on the first try. When I press the button for the 2nd time, that's when I receive the data, where is there a delay ?

Drew Reese Over a year ago

@PatrickYoussef Does clicking this button also trigger some asynchronous callback, i.e. does it trigger some data fetching or similar?

Patrick Youssef Over a year ago

No, at first, I initialize "let results: Filters = {}" (Filters is an interface I created). Then clicking the button calls a function that changes the variable "results". And then as you can see, I have a button that sends "results" to /home

Collectives™ on Stack Overflow

React - Pass data in React Router

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related