BrowserRouter, Routes, Link, and useNavigate

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