React Router Tutorial in Hindi #8 Route Prefixes

import { Navigate, Route, Routes } from 'react-router'

import Home from './Home'

import About from './About'

import Login from './Login'

import NavBar from './NavBar'

import PageNotFound from './PageNotFound'

import College from './College'

import Student from './Student'

import Department from './Department'

import Details from './Details'

function App() {

return (

<>

{/* <NavBar /> */}

<Routes>

<Route element={<NavBar />}>

<Route path="/" element={<Home />} />

<Route path='in'>

<Route path='/in/user'>

<Route path="/in/user/login" element={<Login />} />

<Route path="/in/user/about" element={<About />} />

</Route>

</Route>

</Route>

<Route path="/college" element={<College />}>

<Route index element={<Student />} />

<Route path='department' element={<Department />} />

<Route path='detail' element={<Details />} />

</Route>

<Route path='/*' element={<PageNotFound />} />

{/* <Route path='/*' element={<Navigate to="/" />} /> */}

</Routes>

</>

)

}

export default App

import { Link, Outlet } from "react-router";

import './header.css'

export default function NavBar() {

return<div>

<div className="header">

<div>

<Link className="link" to={"/"}><h2>Logo</h2></Link>

</div>

<div>

<ul>

<li>

<Link className="link" to="/">Home</Link>

</li>

<li>

<Link className="link" to="/in/user/login">Login</Link>

</li>

<li>

<Link className="link" to="/in/user/about">About</Link>

</li>

<li>

<Link className="link" to="/college">College</Link>

</li>

</ul>

</div>

</div>

<Outlet />

</div>

}