React Router tutorial in Hindi #3 Basic Routing | BrowserRouter | Routes | Link

What is BrowserRouter

What is Routes

What is Route

What is Link

Make basic Pages

Make Different file for links

Interview Question


  1. BrowserRouter:- This component enables client-side routing using the browser's history API.


  1. Routes:- It's responsible for rendering the appropriate component based on the current URL


  1. Route:- Each Route component defines a path and the corresponding component to render when that path is matched.


  1. Link:- A link for navigate from 1 page to other page


import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import {BrowserRouter} from 'react-router'

createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>,
)


import { Route, Routes } from 'react-router'
import Home from './Home'
import About from './About'
import Login from './Login'
import NavBar from './NavBar'

function App() {

return (
<>
<NavBar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/login" element={<Login />} />



</Routes>
</>
)
}

export default App


export default function Home(){
return<h1>Home Page</h1>
}


export default function Login(){
return<h1>Login Page</h1>
}


export default function About(){
return<h1>About Page</h1>
}