Rendering a Nested route in React router v6 on a different page

Question

function App() {
  return (
    <Router>
        <Routes>
          <Route path='/' element={<Home/>}/>
          <Route path='doctor' element={<Doctor/>} >
            <Route path='/home' element={<Homepage/>}/>
          </Route>
          <Route path='admin' element={<Admin/>}/>
        </Routes>
    </Router>
  );
}

Please how do I ensure that the nested route '/homepage' renders on a new page instead of within the doctor route

Hi, thanks , I appreciate, it worked. If I want to perform user authentication on the '/doctor' route before entering the homepage, will it still work, seeing as it has been pulled outside? — Olufuwa David, Feb 12 '23 at 11:40
You could extract the login process in a separate component, called `ProtectedRoute`, for example, and wrap any route where you need authentication. — Youssouf Oumar, Feb 12 '23 at 11:52

score 1 · Answer 1 · answered Feb 13 '23 at 21:15

If you are wanting to render Homepage on its own page separate from the Doctor component then it'll need to be its own separate route. You can do this a couple ways.

Unnested route on its own absolute path.

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/doctor' element={<Doctor />} />
        <Route path='/doctor/home' element={<Homepage/>} />
        <Route path='admin' element={<Admin />} />
      </Routes>
    </Router>
  );
}

Nested on its own relative path as a sibling to a route rendering Doctor.

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/doctor'>
          <Route index element={<Doctor />} />        // <-- "/doctor"
          <Route path='home' element={<Homepage/>} /> // <-- "/doctor/home"
        </Route>
        <Route path='admin' element={<Admin />} />
      </Routes>
    </Router>
  );
}

Thank you very much....the second method is what I was trying to achieve in the first place. Now I can add more siblings — Olufuwa David, Feb 14 '23 at 22:30

Rendering a Nested route in React router v6 on a different page

1 Answers1