1

I have only seen examples of creating a <Navbar /> in react-router placing it outside <Routes>

example:

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />}
        <Route path="/about" element={<About />}
      </Routes>
    </Router>
  )
}

How can I render <Navbar/> inside the PrivateRoutes as I can't place it outside <Routes>

return (
  <Router>
    <AuthContext.Provider value={{ auth, setAuth }}>
    
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="*" element={<Login />} />
        <Route element={<PrivateRoutes />}>
          <Route>
            <Route path="/" element={<Home />} exact />
            <Route path="/about" element={<About />} />
          </Route>
        </Route>
      </Routes>
    </AuthContext.Provider>
  </Router>
);
Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Jorgefilemon
  • 23
  • 5
  • The `Navbar` component can't go between `AuthContext.Provider` and `Routes`? It's unclear what any issue is or what you are expecting an answer to be. Or are you specifically wanting to render the `Navbar` on ***only*** the protected routes? If so, do this answer your question? https://stackoverflow.com/a/69999387/8690857 – Drew Reese Jan 20 '23 at 05:55
  • yep! sorry for not being clear, only render navbar on the protected routes – Jorgefilemon Jan 20 '23 at 06:03
  • Ah, then yeah, creating a layout route component that renders the `Navbar` and an `Outlet` for the nested routes is the way to go. That `Route` with neither `path` nor `element` is the a good place for it. – Drew Reese Jan 20 '23 at 06:04

0 Answers0