Routing allows navigation between pages in a React application.

npm install react-router-dom

Home Component

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

About Us Component

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

Configure Router

import {
 BrowserRouter,
 Routes,
 Route
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App() {
 return (
   <BrowserRouter>
     <Routes>
       <Route
         path="/"
         element={<Home />}
       />
       <Route
         path="/about"
         element={<About />}
       />
     </Routes>
   </BrowserRouter>
 );
}
export default App;

Dynamic Routing

<Route
 path="/user/:id"
 element={<User />}
/>

Access Dynamic Parameter

import { useParams } from "react-router-dom";
function User() {
 const { id } = useParams();
 return <h1>User ID: {id}</h1>;
}

1. What is Routing in React?

Routing is used to navigate between pages/components without page reload.

2. Which package is used for routing?

react-router-dom

3. What is BrowserRouter?

It enables routing in React applications.

4. Why use Link instead of anchor tag?

Because Link prevents page reload and provides fast navigation.