What is React Router?
React Router is a library used for navigation in React applications.
It helps users move between pages without refreshing the browser.
To install React Router:
npm install react-router-dom
1. BrowserRouter
BrowserRouter is the main wrapper for routing.
It keeps your UI synchronized with the browser URL.
Example:
import {
BrowserRouter,
Routes,
Route,
Link
} from "react-router-dom";
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function App() {
return (
<BrowserRouter>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Why do we use BrowserRouter?
Without BrowserRouter, routing will not work.
It enables:
URL handling
Navigation
Route management
2. Routes and Route
Routes is used to group all routes.
Route defines which component should load for a specific URL.
Example:
import { Routes, Route } from "react-router-dom";
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
);
}
export default App;
Explanation
Path Component Loaded
/ Home
/about About
When users visit /about, React shows the About component.
3. Link
Normally, HTML uses tags for navigation.
But in React Router, we use Link.
Why?
Because reloads the page.
Link changes pages without refreshing.
Example:
import { Link } from "react-router-dom";
function Navbar() {
return (
<div>
<Link to="/">Home</Link>
<br />
<Link to="/about">About</Link>
</div>
);
}
export default Navbar;
Output
Clicking Home goes to Home page
Clicking About goes to About page
No page refresh happens
4. useNavigate Hook
useNavigateis used for programmatic navigation.
This means navigation happens using JavaScript code.
Example:
After login
After form submission
Redirecting users
Example:
import { useNavigate } from "react-router-dom";
function Login() {
const navigate = useNavigate();
function handleLogin() {
alert("Login Successful");
navigate("/home");
}
return (
<div>
<button onClick={handleLogin}>
Login
</button>
</div>
);
}
export default Login;
Explanation
When the button is clicked:
Alert message appears
User automatically moves to /home
Complete Example
import {
BrowserRouter,
Routes,
Route,
Link,
useNavigate
} from "react-router-dom";
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}
function Login() {
const navigate = useNavigate();
function loginUser() {
navigate("/");
}
return (
<button onClick={loginUser}>
Go Home
</button>
);
}
function App() {
return (
<BrowserRouter>
<Link to="/">Home</Link>
<br />
<Link to="/about">About</Link>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/login" element={<Login />} />
</Routes>
</BrowserRouter>
);
}
export default App;
Advantages of React Router
Fast navigation
No page refresh
Better user experience
Easy routing system
Works well for SPAs