React Router: How to add child routes

For react router 4 and above

Avery Duffin

Follow

2 min read

·

Jul 9, 2019

1

Listen

Share

Hopefully by now you are familiar with react. But one of the most important things when building your single page web apps is understanding routing. Lucky for us react has made routing really easy.

When you first start writing react apps you probably started with a bunch of these:

const NewComponent = ({shouldDisplay}) => {
  return shouldDisplay ? <div>HA!</div> : null
}

Well you could do that for your routing but as your components and apps get bigger things are going to get more hairy.

Probably arguably the best library for routing is react-router. Instead of taking a deep dive into react-router. Lets talk about how you can make your router use sub-routes or child routes. If you need some more information on how to use react router check out the website here.

First make sure you import the library and components you need.

import { 
   BrowserRouter as Router, 
   Link, 
   Route 
} 
from 'react-router-dom'

Now first thing we will need is a component that renders our routes.