How to prevent react router 5 to render DashboardLayout component below specific route?-CodePudding

I am trying to create a route that works as follows:

 <Route path='/home' exact component={Home}/>
{loggedin &&
<DashboardLayout>
<Route path='/settings' exact component={Settings} />
<Route path='/edit' exact component={AdMaker} />
</DashboardLayout>
}

If I am logged in, the DashboardLayout is rendering which I dont want if the route is /home. What should i do? [Please recommend methods other than switch]

CodePudding user response：

There are many different way to do it, one of them is checking the pathname

let location = useLocation();

let checkIsHome = () => {
    return location.pathname?.includes('home')
}
 
<Route path='/home' exact component={Home}/>
{loggedin && !checkIsHome() &&
  <DashboardLayout>
    <Route path='/settings' exact component={Settings} />
    <Route path='/edit' exact component={AdMaker} />
  </DashboardLayout>
}