How to Pass Props to Handler Component Using React Router

1. Pass Props to Another Component Using React Router
2. Conclusion

The react-router performs the primary function of linking one webpage to the other. When building multi-page apps, we apply the react-router to link the pages together.

React router, however, performs one other function. It can also pass state or props{property} from one link to another.

With this approach, we can use one link to control the state of another link or share part of elements of one page to another without rendering the entire content of the previous page.

Pass Props to Another Component Using React Router

For example, we want to pass a prop that will adjust the URL of the Page 5 component from the Page 4 component using the React Router.

We will create a new project folder and install React Router with npm install react-router and then router DOM with npm install react-router-dom. Then we will create a folder and name it pages, then create two components, Page4.js and Page5.js.

Then we start with coding up the App.js file like this:

Code Snippet- App.js:

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Page4 from './pages/Page4';
import Page5 from './pages/Page5';

function App(props) {
  return (
    <BrowserRouter>
    <Routes>
      <Route exact path="/" element={<Page4/>} />
      <Route exact path="/page4" element={<Page4 />} />
      <Route path="/page5/:type" element={<Page5/>} />
      </Routes>

    </BrowserRouter>
  );
}
export default App;

Here we link both components to the App.js and then make the Page5 page accept any type of prop using the :type attribute.

Then in the Page4.js file, we put in these codes.

Code Snippet- Page4.js:

import React from 'react';
import { Link } from 'react-router-dom';

function Page4(props) {
    return (
        <div>
            <h1>Title of Page 4</h1>
            <hr />
            <Link to={{
                pathname: "/page5/parameter-data",
                state: { stateParam: true }
            }}>Move to Next Page</Link>
        </div>
    );
}

export default Page4;

While linking Page4 to Page5, we also added a state that updates the URL. It usually displays just http://localhost:3000/page5, but now it should show this: http://localhost:3000/page5/parameter-data as we have added from the Page4.

Then in Page5, we create codes that link it back to Page4, like this.

Code Snippet- Page5.js:

import React from 'react';
import { Link, useParams, useLocation } from 'react-router-dom';

function Page5(props) {
    const { type } = useParams();
    return (
        <div>
            <h1>Title of Page 5</h1>
            <hr />
            <Link to={"/page4"}>Move to Prev Page</Link>
        </div>
    );
}

export default Page5;

And we also added the const {type} to receive the props from Page4.

Output:

Conclusion

This approach can prove efficient when we want to add a standout feature or props that we don’t want to lose inside a haystack of codes. So we could create a separate component for it and link it to the page we want while passing in the prop or state.