DEV Community

loading...
Cover image for react-router: Three Route Rendering Methods (component, render, and children)

react-router: Three Route Rendering Methods (component, render, and children)

Raynaldo Sutisna
Full Stack Developer
・2 min read

Introduction

In the last post, I talked about react-router setup tutorial. If you don't read the previous post, click it here!. I want to add several important topics about Route Rendering Methods.

Route Rendering methods

There are several ways to render Component or Tag HTML with a <Route>. I used this way in my last post.

<Route path="/">
  <Home />
</Route>
Enter fullscreen mode Exit fullscreen mode

Nothing is wrong with this snippet, and the <Home/> component will be rendered. However, you will not have access to three route props that are match, location, and history. I will talk about these three props in the next post. Stay tuned! So, let's take a look at how we can access those props if we are using these three route rendering methods.

1. Component <Route component/>

The first rendering method is very simple. We just need to put the component as a prop in the Route Component.

<Route path="/" component={Home} />
Enter fullscreen mode Exit fullscreen mode
const Home = (props) => {
  console.log(props);
  return <div>Home</div>;
};
Enter fullscreen mode Exit fullscreen mode

alt text
There you go. You will get these props.

Wait. How we can pass another prop to the component? The answer is we cannot use this rendering method. However, we can use render and children

2. Render <Route render/>

Using this rendering method, you will have access to use an inline function, and you can put another prop to your component. You can optionally pass the route props as function parameter.

<Route
 path="/contact"
 render={(routeProps) => {
  return <Contact name={name} address={address} {...routeProps} />;
 }}
/>
Enter fullscreen mode Exit fullscreen mode

With <Route render/>, you can also render HTML tag, and it does not require to render a component like <Route component/>

<Route
 path="/contact"
 render={() => {
  return (
   <div>
    <h2>Contact</h2>
    <p>Name: {name}</p>
    <p>Adress: {address}</p>
   </div>
  );
 }}
/>
Enter fullscreen mode Exit fullscreen mode

I personally prefer to use this rendering method.

3. Children <Route children />

Basically, children and render methods are the same. Both of them receive a function, but if you are using children, it will be rendered if the path is not matched. Also, you should make sure that you are not using <switch>

<Route path="/" exact component={Home} />
<Route path="/about" render={() => <About></About>} />
<Route path="/portfolio" children={() => <Portfolio></Portfolio>} />
<Route path="/contact" children={() => <Contact></Contact>} />
Enter fullscreen mode Exit fullscreen mode

In this case, when users hit the / path, <Portfolio/> and <Contact/> components will be rendered because they use the children render method.
To be honest, I'm not sure when I should use this method on a real project, but you can see the documentation here.

Conclusion

These are three route rendering methods that you can use. At first, I was confused why there are so many ways to render the route. After I read the documentation several times, I got my "AHA" moment. I hope it would be helpful, and please leave a comment for questions or feedback! Happy Coding!

Discussion (4)

Collapse
elischei profile image
Eli H. Schei • Edited

Good overview! I didn't know about the Route children one :)

Collapse
raaynaldo profile image
Raynaldo Sutisna Author

Thank you! @elischei . Hope it would be helpful :)

Collapse
hiteshvijayhv profile image
Hitesh Vijay

Great post!

Collapse
raaynaldo profile image
Raynaldo Sutisna Author

Thank you for reading!