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!

Answer 1

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>