How to implement nested routes in React

To get started on your react routing, your best guide is with React Training/React Router. Now every react method that I'm going to use, you can check it out in the guide mentioned.

Use Case

I used the nested route to create a portal layout for my application. I needed to have a couple of pages on the site and have a portal side as well. I want to be able to do all that without having to re-render the whole of the portal pages at every new page access.

How to nest your routes

What we are trying to build is food management application where the admin adds new drinks and food with prices and available quantity to the homepage for the consumers.

In your App.js file,

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

//components
import Homepage from '../pages/site/Homepage'
import PortalLayout from '../layouts/site/PortalLayout'

function App() {
    return(
        <Router>
            <Switch>
               <Route exact path="/" component={ Homepage } />
               <Route path="/contact-us" component={ ContactUs } />
               <Route path="/admin" component={ PortalLayout } />
            </Switch>
        </Router>
    )
}

export default App

There is no need to import react first thing anymore in your components. You can read more on that from the official documentation.

• At this point, when you visit localhost:3000/admin what you will have there is essentially your portal layout.

In PortalLayout.js file,

import { Switch, Route } from 'react-router-dom'

//elements
import SideBar from '../components/portal/SideBar'
import BreadCrumb from '../components/elements/BreadCrumb'
import UserAvatar from '../components/elements/UserAvatar'

//components
import Food from '../pages/portal/Food'
import AddFood from '../pages/portal/AddFood'
import Drinks from '../pages/portal/Drinks'
import AddDrinks from '../pages/portal/AddDrinks'
import Settings from '../pages/portal/Settings'

const PortalLayout = () => {
    return (
        <>
            <SideBar />
            <UserAvatar />
            <BreadCrumb />
            <Switch>
                <Route exact path="/" render={ () => <h1>Portal Layout</h1> } />
                <Route path="/food" component={ Food } />
                <Route path="/food/add-food" component={ AddFood } />
                <Route path="/drinks" component={ Drinks } />
                <Route path="/food/add-drinks" component={ AddDrinks } />
                <Route path="/settings" component={ Settings } />
            </Switch>
        </>
    )
}

export default PortalLayout

To implement the nesting of routes, BrowserRouter only need to occur once in your application so there is no need to have it PortalLayout.js. Now, you can have as many nested routes with Switch, Route in your application.

• With this implementation, you can visit localhost:3000/admin/food to see all the food options created in the application. You have successfully been able to nest routes in react. Yay!!! 🎉

• In App.js a component is rendered for /admin and notice how the route does not have the exact prop but the route inPortalLayout does.

Right now everything should be working as it should but while navigating, I don't want the user to access localhost:3000/admin because there is no data to present, it is just a portal layout.

In some other cases where you'd have to nest routes, it might not be for this use case, i.e portal. This next part, you might not need it.

What I want is that whenever localhost:3000/admin is accessed, the user is redirected to localhost:3000/admin/food or wherever you want it to be mostly likely the dashboard.

Here is how we handle that small bug:

In PortalLayout.js file,

The only part that is changing is the route to the admin and importing Redirect

import { Switch, Route, Redirect } from 'react-router-dom'
.....
                  <Route exact path="/">
                      <Redirect from="/admin" to="/admin/food" />
                  </Route>
.....

• I removed the render because I would not be rendering that particular route to see but you can leave the render part as is, it does not change anything. I just don't like leaving unnecessary code in my codebase.

With this, your application should work perfectly with the nested routes.

#nestedroutes #nestinginreact

Happy coding!!!