Blog
#react
#css
#javascript
#mongodb

How to pass props to the route component in React router

June 17, 2019🍿 2 min readEdit this post on Github

This is part 6 of 8 in my series on "Deep dive into React Router"

Follow me on twitter. I share quick tips, my reading list and also about free workshop and webinars around web and mobile development everyday.

We have seen several examples and use cases in react router. One among them is passing props to the route component directly.

Its very easy to achieve in react router, Lets create a new route for passing props to the component.

// App.js
...

const PropsPage = () => {  return (    <h3>Props Page</h3>  );};
const App = () => {
  return (
    <section className="App">
      <Router>
        ...
        <Link to="/404-not-found">404</Link>
        <Link to="/props">Passing Props</Link>        <Switch>
          ...
          <Route exact path="/props" component={PropsPage} />          <Route component={NoMatchPage} />
        </Switch>
      </Router>
      <a href="/about">about with browser reload</a>
    </section>
  );
};

export default App;

Right now, we just added the component and new page. Lets pass a props title to the page.

There are two ways to pass props. First one is easy way,

Passing function as a component props in Route component

...

const PropsPage = ({ title }) => {
  return (
    <h3>{title}</h3>
  );
};

...

<Route exact path="/props-through-component" component={() => <PropsPage title={`Props through component`} />} />

This will work but this is not the recommended way by react router. Why? Because

  • Internally, react router use React.createElement to render the component passed to the component props. If we pass a function to it, it will create a new component on every render instead of just updating the existing component.
  • In a small apps with fairly non complex pages, it won’t impact the performances. But for large apps with multiple state changes within the page will degrade the performance of the page due to unnecessary re-rendering.

React router provides an easy solution for this case. Instead of passing function through component props, we can pass it through render props. While passing our own props, we also need to pass the default props send to the render props by react router. Lets see it in our example,

...

<Link to="/props-through-render">Props through render</Link>
...

<Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={`Props through render`} />} />

This is the recommended way to pass props in react router.

Its that simple. If you want to see the whole example, check it out here.

You can checkout the codebase for this series here and the code for this section here

Wanna become a Pro Engineer!

Weekly, practical advice on how to become a better Engineer. Read by 210+ engineers, managers, and founders.

Share:

Made with ❤️ in Tallinn, Estonia

Paramanantham Harrison's DEV Profile