React Router Interview Questions: What to Expect in React Interviews

For multi-page React applications, a router is essential, and there are many routing libraries available in the market, such as React Navigation, Wouter, Reach Router, and React Router. Among these, React Router is the most popular. We have compiled the top 15 React Router interview questions with answers, along with useful resources link to help make your interview preparation easier.

1. How to Build a Custom 404 Page with React Router?

To create a custom 404 page, you need to add a route with a wildcard path (*) as the last entry in the array of route objects passed to createBrowserRouter function in React Router DOM.

const router = createBrowserRouter([
  {
    path: "/",
    element:  <App />,
  },{
    path: "*",
    element:  <div />Page not found!!!<div />,
  },
]);

This ensures that if none of the other defined routes match the current URL, the wildcard route is triggered. The specified element given in this route will then serve as a fallback, acting as a catch-all route for unmatched paths.

Helpful Resources: https://reactrouter.com/en/main/routers/create-browser-router

2. Can you explain how to programmatically redirect to a page in React?

To programmatically redirect to a page in React, you can use the useNavigate hook from React Router.

   
  import { useNavigate } from 'react-router-dom';
  
  const MyComponent = () => {
  const navigate = useNavigate();

  const handleRedirect = () => {
    navigate('/target-page'); // Replace with your target path
  };

  return (
     <button onClick={handleRedirect} />
      Go to Target Page
     </button/>
  );
};
 

A related question that could be asked here is: "How can you redirect when a component mounts in React?

If you want to redirect when a component mounts, you can call the navigate method inside a useEffect hook

   
  import { useEffect } from 'react';
  import { useNavigate } from 'react-router-dom';
  
  const MyComponent = () => {
  const navigate = useNavigate();
  useEffect(() => {
    navigate('/target-page'); // Replace with your target path
  }, [navigate]);

  return null; // or loading indicator
};
   
 

Helpful Resources: https://reactrouter.com/en/main/hooks/use-navigate#usenavigate

3. How can you retrieve query parameters in React?

You can use the useLocation hook from React Router to retrieve query parameters

   
  import { useLocation } from 'react-router-dom';
  
  const MyComponent = () => {
    	const location = useLocation();
  	let params = new URLSearchParams(location.search);
  	console.log(params.get('query-param'));  

   
 

Helpful Resources: https://reactrouter.com/en/main/hooks/use-location#uselocation

4. How to create a protected route in a React app?

We need to create a reusable ProtectedRoute component that will only render the component if the user is authenticated. Otherwise, it will redirect them to the login page.

   
import React from 'react';
import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const  isAuthenticated  = //make auth check here
  return isAuthenticated ? children :  <Navigate to="/login" / >
};

export default ProtectedRoute;
   
   

Set up your routing structure using ProtectedRoute for any route you want to protect.

  import ProtectedRoute from './ProtectedRoute';
  
  
  const router = createBrowserRouter([
  {
    path: "/",
    element:  <App />,
  }, {
    path: "/login",
    element:  <Login />,
  },{
    path: "/my-account",
    element:  <ProtectedRoute><MyAccount /></ProtectedRoute>,
  },{
    path: "*",
    element:  <div />Page not found!!!<div />,
  },
]);