React route v6 have NavBar for only some routes

user_9646189 0
Viewed 249

In react-router-dom v5 I was able to do this in order for the NavBar to only show when a user was logged in and using a relevant link (not the HomePage). I can't figure out how to do this in v6. When I do something similar I get a "No route found" error for the /meds and /hist paths.

V5

<Route exact path="/" component={HomePage} />
    <Route
        path={'/(.+)'}
        render={() => (
        <div>
            <NavBar />
            <Container className="main">
                <Private exact path="/meds" component={MedicationDashboard} />
                ...

V6

<Routes>
<Route exact path='/' element={<HomePage />} />
<Route
    path={'/(.+)'}
    render={() => (
    <div>
        <NavBar />
        <div>
            <Routes>
                <Route path='/meds' element={<Medications />} />
                <Route path='/hist' element={<History />} />
            </Routes>
        </div>
    </div>
    )}
    />
</Routes>
navbar reactjs router routes
1 Answers

Following to react router v6 docs You can do it this way:

App.tsx

<Routes>
    <Route index element={<HomePage />} />
    <Route element={<NavbarLayout />} />
        <Route path='/meds' element={<Medications />} />
        <Route path='/hist' element={<History />} />
    </Route>
</Routes>

You will need to create component to store layout, let's call it NavbarLayout.tsx. Source code should looks like:

NavbarLayout.tsx

import { Outlet } from "react-router-dom";

export default function NavbarLayout () {
    return (
        <div>
            <NavBar />
            <div>
                <Outlet />
            </div>
        </div>
    )
}
user_113507340
Related