React js Router Basics Practice Questions with Solutions

By /

Introduction

React Router is commonly used to handle client-side navigation in React applications. It allows different URLs to display different components without requiring a full page reload for each navigation. Basic routing involves defining routes and connecting URLs to React components. In this chapter, we will solve practical questions covering BrowserRouter, Routes, Route, Link, NavLink, navigation, and creating a simple multi-page React application. React js Router basics practice questions with solutions help to build concepts.

1. What is React Router?

React Router is a routing library used with React applications to manage navigation between different URLs and UI components.

For example, an application may have:

/
/about
/contact
/products

Each URL can display a different component.

A basic route setup can look like:

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Here:

  • / displays Home.
  • /about displays About.

React Router handles the routing on the client side.

2. Why is React Router used in React applications?

React applications often need multiple views such as:

  • Home
  • About
  • Contact
  • Products
  • Services
  • Profile

React Router allows these views to be associated with different URLs.

For example:

<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />

When the URL changes, React Router determines which route matches and renders the corresponding element.

This provides a navigation experience without requiring a traditional full-page navigation for every route change.

3. What is BrowserRouter in React Router?

BrowserRouter is a router component that uses the browser’s History API to keep the UI synchronized with the current URL.

Example:

import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Home />
    </BrowserRouter>
  );
}

It is commonly placed around the part of the application that needs routing.

A typical structure is:

<BrowserRouter>
  <Routes>
    {/* Routes */}
  </Routes>
</BrowserRouter>

The components inside BrowserRouter can use React Router features such as routes and navigation links.

4. What are Routes and Route in React Router?

Routes is used to contain a collection of Route components.

A Route connects a URL path with the UI that should be rendered when that path matches.

Example:

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Here:

/       → Home
/about  → About
/contact → Contact

The element prop specifies the React element to render for a matching route.

5. How do you create basic routes in React Router?

First, install React Router if it is not already installed:

npm install react-router-dom

Then create some components:

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function Contact() {
  return <h2>Contact Page</h2>;
}

Now define the routes:

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Now the application can display different components based on the current URL.

6. How do you navigate between routes using Link?

The Link component provides client-side navigation between routes.

Example:

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

We can place the navigation and routes together:

function App() {
  return (
    <BrowserRouter>
      <Navbar />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

When a user clicks a Link, React Router handles the navigation without using a normal full-page anchor navigation.

7. What is the difference between Link and a normal anchor tag?

A normal HTML anchor is written as:

<a href="/about">About</a>

For navigation inside a React Router application, you commonly use:

<Link to="/about">About</Link>

The main difference is that Link is designed for navigation handled by React Router.

Example:

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Using Link for internal React Router navigation helps preserve the client-side routing experience.

8. What is NavLink in React Router?

NavLink is similar to Link, but it provides information about whether the link matches the current route.

This is especially useful for navigation menus.

Example:

import { NavLink } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <NavLink to="/">Home</NavLink>
      <NavLink to="/about">About</NavLink>
      <NavLink to="/contact">Contact</NavLink>
    </nav>
  );
}

You can use the className function to apply a class based on the active state:

<NavLink
  to="/about"
  className={({ isActive }) =>
    isActive ? "active" : ""
  }
>
  About
</NavLink>

When /about is the current route, isActive is true.

This makes NavLink useful for highlighting the currently selected navigation item.

9. How do you navigate programmatically using useNavigate?

React Router provides the useNavigate() Hook for programmatic navigation.

Example:

import { useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login logic
    navigate("/dashboard");
  };

  return (
    <button onClick={handleLogin}>
      Login
    </button>
  );
}

When the button is clicked, the application navigates to:

/dashboard

You can also navigate backward:

navigate(-1);

useNavigate() is useful when navigation needs to happen as part of an action or event rather than a user clicking a navigation link.

10. How do you build a practical React Router application?

Let’s create a simple application with Home, About, and Contact pages.

First, create the components:

function Home() {
  return <h2>Welcome to the Home Page</h2>;
}

function About() {
  return <h2>About Our Website</h2>;
}

function Contact() {
  return <h2>Contact Us</h2>;
}

Create the navigation:

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>{" "}
      <Link to="/about">About</Link>{" "}
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Now create the routes:

import {
  BrowserRouter,
  Routes,
  Route
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Navbar />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

How it works

When the user visits:

/        → Home
/about   → About
/contact → Contact

The corresponding component is rendered.

The navigation links allow users to move between these routes without requiring a traditional full-page navigation for each internal route.

This is the foundation for building larger React applications with multiple routes.

Key Takeaways

  • React Router is commonly used to manage client-side routing in React applications.
  • BrowserRouter provides the routing context for the application.
  • Routes contains route definitions.
  • Route connects a URL path with an element.
  • Link is used for navigation between routes.
  • NavLink can identify when its route is active.
  • useNavigate() allows programmatic navigation.
  • Routes can display different components based on the URL.
  • React Router can provide navigation without a full-page reload for typical client-side route changes.
  • Link and NavLink are commonly preferred for internal React Router navigation.
  • React Router can be expanded later with nested routes, dynamic routes, URL parameters, loaders, actions, and other routing features.

FAQs

1. What is React Router?

React Router is a routing library commonly used with React applications to manage URLs and display different UI components for different routes.

2. What is BrowserRouter?

BrowserRouter is a router component that uses the browser History API to keep the application’s UI synchronized with the URL.

3. What is the difference between Routes and Route?

Routes contains route definitions, while each Route defines a particular URL path and the element that should be rendered when it matches.

4. What is Link in React Router?

Link is a React Router component used to navigate between routes within a React application.

5. What is the difference between Link and NavLink?

Both provide client-side navigation, but NavLink also provides information about whether its route is currently active, making it useful for navigation menus.

6. What is useNavigate in React Router?

useNavigate() is a React Router Hook that allows a component to navigate programmatically, such as after a form submission or login action.

7. Do you need React Router for every React application?

No. React Router is useful when an application needs client-side routing and multiple URL-based views. A small application with a single view may not need a routing library.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top