How to use Route in ReactJS

Question

I need some guidance on the reactjs Routes and how to manifest them properly.

So I have my react directory as below (I will omit unnecessary directories and files)

Routes.js
App.js
src/
   ComponentOne.jsx
   ComponentTwo.jsx

My curent Routes.js looks like this

import ComponentOne from './src/ComponentOne'
import ComponentTwo from './src/ComponentTwo'

<Route path='/banuka/' exact component={ComponentOne} />
<Route path='/banuka/test' exact component={ComponentTwo} />

And in the ComponentOne.jsx there is a nothing but a button wrapped in a Link of react-router-dom

let valueobject = {<some-key-value-pairs>} // take a note on this line

<Link to={`/banuka/test`}>
    <Button variant="dark">    
    Upload Data
    </Button>
</Link>

So when I click on this Button it navigates me two ComponentTwo component.

This is where the problem comes in:

I want to pass the variable valueobject which is an object conains key-value pairs as props from ComponentOne to ComponentTwo

But as you can see, the ComponentTwo is already being rendered in the Routes.js

How can I achieve this?

You can suggest me a better way (even if it means, I have to delete the Routes.js, but it is better if I can keep it as is) to achieve this, so it will look like:

<ComponentTwo values={valueobject}/>

Thank you!

I see three, in my opinion preferred ways to realize this: 1.) Use global state management, like Redux, MobX etc. and let the component two get the data from the store. 2.) Try to represent the state via url. Which would mean the route would be something like this: `/banuka/test/:someId/:someMoreInfo` and you would redirect based on a button press towards: `/banuka/test/42/bananas`, there is already such a solution provided: 3.) https://stackoverflow.com/a/48949836/3977134 — r3dst0rm, Jul 07 '20 at 09:04
Look at using the Link to send some route state: https://reactrouter.com/web/api/Link/to-object — Drew Reese, Jul 07 '20 at 09:04
@r3dst0rm I liked your approach but how can I send a data object like this with the query parameters? — user13456401, Jul 07 '20 at 09:06

Drew Reese · Accepted Answer · 2023-05-26T00:26:45.953

2

You can send as route state

https://reactrouter.com/en/main/components/link

let valueobject = {<some-key-value-pairs>} // take a note on this line

<Link
  to={{
    pathname: '/banuka/test',
    state: {
      ...valueobject,
    },
  }}
>
    <Button variant="dark">    
    Upload Data
    </Button>
</Link>

edited May 26 '23 at 00:26

answered Jul 07 '20 at 09:07

Drew Reese

165,259
14
153
181

Thank you, may I ask why you have put three dots here? – user13456401 Jul 07 '20 at 09:08
@user13456401 Ah yes, this is the spread syntax, to spread all the key-value pairs of `valueobject` into the route state object. So for example if `valueobject = { foo: 'a', bar: 13 }`, then the route state can be accessed as such `location.state.foo // a` and `location.state.bar // 13`. – Drew Reese Jul 07 '20 at 09:20
How can I pass a normal value (a string) with this method? how the syntax looks like? – user13456401 Jul 07 '20 at 09:48
@user13456401 `to={{ pathname: "...", state: 'foobar' }}` or `to={{ pathname: "...", state: { foo: 'bar' } }}`, it's the object form so state is *just* a key to *some* value, it can be a primitive or object. – Drew Reese Jul 07 '20 at 09:51
Thank you I get this, but I still have the problem on how this syntax works. What if I had two variables (not an object), how can I pass them using this syntax? and how can I access this from the other component? – user13456401 Jul 07 '20 at 10:10
1

@user13456401 It's not special syntax, it's just an object literal. Few options: Object Shorthand `to={{ pathname: "...", state: { var1, var2, var3 } }}` here the keys will be the same as the variable names, or normal object notation `to={{ pathname: "...", state: { key1: value1, key2: value2, key3: value3} }}`. The former could be accessed `location.state.var3`, the latter `location.state.key2`. *Anything* you want to sent in route state should be packed into the `state` property of the `to` object. – Drew Reese Jul 07 '20 at 10:25

How to use Route in ReactJS

1 Answers1