React conditionally render a component in specific routes

I haven’t tested it, just brought it up from the top of my head. The idea is that you create a map of routes where your BottomNav should appear. Else, just return null.

import {withRouter} from 'react-router-dom'

const ROUTES_WITH_BOTTOM_NAV = {
   '/home': true,
   '/profile/friends': true
}

const BottomNav = (props) => {
   const currentPage = props.location.pathname;
   if (!ROUTES_WITH_BOTTOM_NAV[currentPage]) return null;

   return (...yourBottomNavJsx)
}

export const withRouter(BottomNav)

Let me know if that helped.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top