How to Route components in ReactJS

Question

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?

Niloy · Accepted Answer · 2020-07-06 21:36:35Z

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>
  );

edited Jul 6, 2020 at 21:36

answered Jul 6, 2020 at 21:30

Niloy

6085 silver badges16 bronze badges

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

1 Comment

user13456401 Over a year ago

Thanks this was helpful :)

Collectives™ on Stack Overflow

How to Route components in ReactJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related