React conditionally render a component in specific routes

Question

This is my Index.js

ReactDOM.render(
   
        
            
                       


        

Answer 1

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.