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

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>

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} />

const Home = (props) => {
  console.log(props);
  return <div>Home</div>;
};

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} />;
 }}
/>

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

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>} />

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!