How to add sub paths in react router

Question

I have a index file where I have

<BrowserRouter>
  <Routes>
    <Route path="/" element={Home}
    <Route path="/home/student/info" element={Info} />
    <Route path="/home/student/about" element={about} />
    <Route path="/home/teacher/score" element={score} />
    <Route path="/home/teacher/attendence" element={attendence} />
  </Routes>
</BrowserRouter>

Here, I have this common path for "/home/student/". So How can I use a react sub path for this, rather than writing separate lines? I'm using react-router 6.

Does this answer your question? [Nested routes with react router v4 / v5](https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4-v5) — KiraLT, Aug 03 '22 at 16:17

score 4 · Answer 1 · edited Aug 03 '22 at 16:52

4

You can use nested routes. Put routes as children of the route component. Don't forget that in RRDv6 the element prop takes a ReactNode, e.g. JSX, and not a reference to a React component like v5.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="home">
      <Route path="student">
        <Route path="info" element={<Info />} />
        <Route path="about" element={<About />} />
      </Route>
      <Route path="teacher">
        <Route path="score" element={<Score />} />
        <Route path="attendence" element={<Attendence />} />
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

You can read more about nested routes here.

edited Aug 03 '22 at 16:52

Drew Reese

165,259
14
153
181

answered Aug 03 '22 at 16:26

remonke

251
3
6

can we write one component for } /> } /> for this and that we will load inside this file – ganesh kaspate Aug 04 '22 at 09:20
this does not work, it says route is only ever to be used as the child of Routes element, never rendered directly.Please wrap your in a – ganesh kaspate Aug 04 '22 at 09:26

How to add sub paths in react router

1 Answers1