0

I need to route to a page when a button is clicked. And I need to pass a prop value to that rendering component as well.

Component I need to route to when I click the button = ProcessData

my current directories look like this:

Route.js
src/
   Main.jsx
   ProcessData.jsx

I have a Route.js in the root directory and it has like below.

<Route path='/banuka/process' component={ProcessData} />

But My button (which I use to click to route to this ProcessData component is inside Main.jsx inside the src directory as below:

But now how can I pass the prop employeeID to the ProcessData component because that it is being called in the Route.js file already?

const [employeeID, setEmployeeID] = useState("");

return(
<Link to="/banuka/process">
<Button variant="success">
    Process Data
</Button>
</Link>
);

I have to render the ProcessData component inside this Link or any other workaround in react-router-dom when this button is clicked and pass the props as well?

can someone help me please?

user13456401
  • 159
  • 1
  • 8

1 Answers1

1

You can use react route params for that or query strings.

If you want to use route param. follow this instruction:

or for query string: use this package https://www.npmjs.com/package/query-string and this instruction

example with params (easy):

 <Route path="process/:something" children={<Process />} />

in the link component

  <Link to="process/some_information_i_need_to_pass">Click me</Link>

in Process component:

  let { something } = React.useParams();

  return (
    <div>
      <h3>Params:: {something}</h3>
    </div>
  );
Niloy
  • 381
  • 2
  • 13