React Routing and Internationalization Interview Questions

In this article, we will cover the most commonly asked React Router interview questions along with their answers. These questions will help us understand how routing works in React applications and will help to test our knowledge of React Router.

Remember, even experienced React developers sometimes struggle with some of these questions. And one question may naturally lead to another. So read through the complete article to get a solid understanding of React Router.

So let’s start with the first question: “What is React Router?”

What is React Router?

React Router is a popular third-party library used for client-side routing in React applications.

• It lets you define different “routes” in your app, where each route maps a URL path to a specific React component.
• Without React Router, navigating between pages in a React app would require a full page reload. React Router handles navigation entirely in the browser without reloading the page.
• It keeps the browser URL in sync with what is displayed on the screen.

Once you understand what React Router is, the next natural question is how it is different from the regular browser navigation.

What is the difference between client-side routing and server-side routing?

In traditional server-side routing, every time you click a link, the browser sends a request to the server and the server responds with a completely new HTML page. This causes a full page reload.

In client-side routing (which React Router uses):

• The browser loads the app only once at the start.
• When the user navigates to a different URL, React Router intercepts the navigation and renders the matching component without making a new server request.
• This makes navigation feel much faster and gives a smoother experience, similar to a native app.

What are the main components in React Router?

React Router provides a set of components that work together to handle routing. The main ones are:

• BrowserRouter: Wraps your entire app and enables routing using the browser’s History API. Usually placed at the root of the app.
• Routes: A container that holds all your Route definitions. It looks at the current URL and renders the matching route.
• Route: Defines a single route by mapping a path to a component (element).
• Link: Used instead of the HTML <a> tag to navigate between routes without causing a page reload.
• NavLink: Similar to Link, but it automatically adds an active class to the link when its path matches the current URL. Useful for navigation menus.
• Navigate: Used to programmatically redirect the user to a different route.
• Outlet: Used in nested routing. It acts as a placeholder where child routes are rendered inside a parent layout.

How do you set up basic routing in React Router?

Setting up basic routing in React Router involves a few steps:

1. Install React Router:

npm install react-router-dom

2. Wrap your app with BrowserRouter in your root file:

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

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

3. Define routes inside your App component using Routes and Route:

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

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

4. Use Link to navigate between pages:

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

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

What is the difference between Link and NavLink in React Router?

Both Link and NavLink are used to navigate between routes without a page reload, but there is one key difference:

• Link is a basic navigation component. It renders an anchor tag and changes the URL when clicked.
• NavLink does everything Link does, but it also knows whether its path matches the current URL. When it matches, it automatically adds an active class to the element, which makes it easy to style the active navigation item.

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

This is especially useful for building navigation menus where you want to highlight the currently active page.

What are dynamic routes in React Router?

Dynamic routes are routes where part of the URL is a variable, not a fixed value. They are used when you want to show different content based on a value in the URL — like a user ID or a product ID.

In React Router, you define a dynamic segment in a route path using a colon (:) followed by the parameter name:

<Route path="/users/:userId" element={<UserProfile />} />

Here :userId is the dynamic segment. So both /users/1 and /users/42 will match this route.

To read the value of the dynamic segment inside the component, you use the useParams hook.

What is the useParams hook?

useParams is a hook provided by React Router that lets you read the dynamic parameters from the current URL inside a component.

For example, if you have a route like /users/:userId, and the user visits /users/5, you can get the value 5 like this:

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

function UserProfile() {
  const { userId } = useParams();

  return <h1>Viewing profile of user: {userId}</h1>;
}

useParams returns an object where each key matches a dynamic segment defined in the route path.

What is the useNavigate hook?

useNavigate is a hook that lets you navigate to a different route programmatically — meaning through code, not just from a link click.

This is useful in situations like:

• Redirecting after a form is submitted
• Redirecting after a successful login
• Going back to the previous page

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

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

  const handleSubmit = () => {
    // After login logic...
    navigate("/dashboard");
  };

  return <button onClick={handleSubmit}>Login</button>;
}

You can also pass -1 to navigate to go back to the previous page, similar to pressing the browser’s back button:

navigate(-1);

What are nested routes in React Router?

Nested routes allow you to render child routes inside a parent route. This is useful when you have a shared layout (like a sidebar or header) that should remain visible while only a part of the page changes based on the URL.

To set up nested routes:

1. Define child routes inside a parent Route:

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

2. Use Outlet inside the parent component to tell React Router where to render the child route:

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

Now visiting /dashboard/profile will render the Dashboard component with the Profile component rendered inside the Outlet.

What is the useLocation hook?

useLocation is a hook that returns information about the current URL. It gives you access to:

• pathname: the current path (e.g., /about)
• search: any query string in the URL (e.g., ?tab=settings)
• state: any state that was passed during navigation
• hash: the hash fragment in the URL (e.g., #section1)

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

function CurrentPage() {
  const location = useLocation();

  return <p>You are on: {location.pathname}</p>;
}

This is useful when you want to track the current route, read query parameters, or restore scroll position when navigating back.

How do you handle a 404 page in React Router?

In React Router, you can handle unknown routes (404 pages) by adding a catch-all route at the end of your Routes with path="*". The * wildcard matches any URL that was not matched by the routes above it.

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/NotFound";

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

This NotFound component will render whenever the user visits a URL that does not match any defined route.

What is the difference between BrowserRouter and HashRouter?

Both BrowserRouter and HashRouter enable client-side routing, but they handle the URL differently:

• BrowserRouter uses the browser’s History API to manage URLs. The URLs look clean and normal, like /about or /users/1. This is the recommended option for most modern apps. However, it requires the server to be configured to serve the app for all routes, otherwise refreshing the page on a deep link will return a 404 from the server.

• HashRouter uses the hash portion of the URL to manage routes, so URLs look like /#/about or /#/users/1. The part after # is never sent to the server, so it works without any special server configuration. It is mostly used for static hosting environments or older projects.

For most React projects, BrowserRouter is the right choice.