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.
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.