React Router Interview Questions & Answers 2026

📖 Introduction

These 11 React Router questions use v6.30.6 declarative routing. They cover nested routes, URL parameters, navigation and client-side guards, with separate notes for current router modes and server authorization.

React Router

Version scope: React/React DOM 19.3.0 with react-router-dom 6.30.6, using declarative routing. Current React Router 8.x documentation uses additional mode-specific APIs; do not mix those into this v6 example without a deliberate migration. Components without their own router wrapper must be mounted beneath one.

This section covers React Router interview questions, including navigation, nested routes, route guards, and React Router v6 features. These questions are essential for understanding client-side routing in React applications.

1. What is React Router?

   React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.

2. How React Router is different from history library?

   React Router matches locations to UI and provides routing-aware links, navigation, nested layouts, and related APIs. Browser history is an underlying navigation mechanism; a history utility alone does not define the route tree.

   For the v6.30.6 declarative examples in this article, use router components and Hooks such as useNavigate and useLocation. Do not assume that an old history object is exposed on a public router Context value. MemoryRouter keeps an in-memory location stack and is useful for controlled web-router tests; this does not make these DOM examples React Native applications.

3. What are the <Router> components of React Router v6?

   Common declarative choices in v6 include BrowserRouter for browser history, HashRouter for hash locations, MemoryRouter for an in-memory stack, and StaticRouter from react-router-dom/server for server rendering. This is not an exhaustive list of every router API.

   Data routers such as createBrowserRouter with RouterProvider also exist from v6.4. Current documentation distinguishes Declarative, Data, and Framework modes. This article deliberately uses v6.30.6 declarative routing, so it does not silently apply a current Framework-mode loader or action API to these components.

4. What is the purpose of push() and replace() methods of history?

   In v6 declarative code, use useNavigate rather than calling an assumed history object from Context. A normal navigation pushes a location; replace updates the current entry. Navigating back uses the actual available history stack.

   This is a fragment inside a component rendered beneath a router:

   const navigate = useNavigate()
   
   function openDashboard() {
     navigate("/dashboard")
   }
   
   function replaceLogin() {
     navigate("/dashboard", { replace: true })
   }
   

   Replacing a login entry can prevent Back from returning to that entry; it does not erase every earlier entry or grant authentication.

5. How do you handle nested routes and route parameters in React Router?

   A parent route renders an Outlet where its matching child appears. useParams reads matched dynamic segments. This complete module uses /user/42/profile as a concrete input; the profile receives userId as the string "42".

   // file: nested-routes.jsx
   import { BrowserRouter, Outlet, Route, Routes, useParams } from "react-router-dom"
   
   function UserLayout() {
     return <section><h1>User area</h1><Outlet /></section>
   }
   
   function UserProfile() {
     const { userId } = useParams()
     return <h2>User ID: {userId}</h2>
   }
   
   export function NestedRoutes() {
     return (
       <Routes>
         <Route path="user/:userId" element={<UserLayout />}>
           <Route path="profile" element={<UserProfile />} />
         </Route>
       </Routes>
     )
   }
   
   export default function NestedDemo() {
     return <BrowserRouter><NestedRoutes /></BrowserRouter>
   }
   

   The default export supplies BrowserRouter for a browser application. Tests can instead mount the exported NestedRoutes beneath MemoryRouter with a known initialEntries value. Use only one owning router around a given tree.

6. How do you handle route guards or private routes in React?

   Pass an explicit authentication result to the guard rather than reading an undefined isAuthenticated variable. Resolve an unknown/loading session state before making this boolean decision. This component must be mounted beneath a router:

   // file: private-route.jsx
   import { Navigate } from "react-router-dom"
   
   export function PrivateRoute({ isAuthenticated, children }) {
     if (!isAuthenticated) {
       return <Navigate to="/login" replace />
     }
     return children
   }
   

   For example, place PrivateRoute around the dashboard route element and provide isAuthenticated from the application's session state. The redirect replaces the current entry. A client guard controls display and navigation; the server/API must still verify access to protected resources.

7. How do you manage the active route state in a multi-page React application?

   Use the useLocation hook to get the current route, and conditionally apply styles for the active state.

   import { useLocation } from "react-router-dom"
   
   function NavBar() {
     const location = useLocation()
     return (
       <nav>
         <ul>
           <li className={location.pathname === "/home" ? "active" : ""}>Home</li>
           <li className={location.pathname === "/about" ? "active" : ""}>About</li>
         </ul>
       </nav>
     )
   }
   

8. How do you handle 404 errors or page not found in React Router?

   A wildcard route supplies a client-side fallback when no more specific route matches. v6 ranks route matches, so the wildcard does not have to be last. This complete route tree deliberately places it first:

   // file: not-found-routes.jsx
   import { Route, Routes } from "react-router-dom"
   
   export function NotFoundRoutes() {
     return (
       <Routes>
         <Route path="*" element={<h1>Page not found</h1>} />
         <Route path="/" element={<h1>Home</h1>} />
         <Route path="/about" element={<h1>About</h1>} />
       </Routes>
     )
   }
   

   Mount it beneath BrowserRouter or MemoryRouter. /about still renders About, while an unmatched path renders Page not found. Showing this text does not set the HTTP response to 404. Actual HTTP status and deep-link fallback behavior belong to the server or SSR/framework deployment and require separate verification.

9. How to get query parameters in React Router v6?

   In React Router v6, you can use the useSearchParams hook to access query parameters from the URL.

   import { useSearchParams } from "react-router-dom"
   
   function MyComponent() {
     const [searchParams] = useSearchParams()
     const queryParam = searchParams.get("paramName")
     return <div>Query Param: {queryParam}</div>
   }
   

   This hook allows you to retrieve and manipulate query parameters in React Router v6.

10. How do you perform an automatic redirect after login in React Router v6?

    Use useNavigate after an explicitly successful operation, or Navigate when an already-known state calls for a redirect. This complete component receives an application-supplied authenticateUser function that returns a Promise of a boolean. Its local test fixture controls success, rejection, and failure; it does not implement a real login service.

    // file: login.jsx
    import { useState } from "react"
    import { useNavigate } from "react-router-dom"
    
    export function useLoginNavigation({ authenticateUser }) {
      const navigate = useNavigate()
      const [isSubmitting, setIsSubmitting] = useState(false)
      const [errorMessage, setErrorMessage] = useState("")
      async function handleLogin() {
        if (isSubmitting) {
          return
        }
        setIsSubmitting(true)
        setErrorMessage("")
        try {
          const isAuthenticated = await authenticateUser()
          if (isAuthenticated !== true) {
            setErrorMessage("Login was not accepted")
            return
          }
          navigate("/dashboard", { replace: true })
        } catch (error) {
          console.error("Demo login request failed:", error)
          setErrorMessage("Login request failed")
        } finally {
          setIsSubmitting(false)
        }
      }
      return { isSubmitting, errorMessage, handleLogin }
    }
    
    export function Login({ authenticateUser }) {
      const { isSubmitting, errorMessage, handleLogin } = useLoginNavigation({ authenticateUser })
      return (
        <div>
          <button disabled={isSubmitting} onClick={handleLogin}>Login</button>
          {errorMessage && <p role="alert">{errorMessage}</p>}
        </div>
      )
    }
    

    Only a true result navigates. A false result or thrown error leaves a visible failure on the login page, and the button is disabled while the operation is pending. Production session validation, cancellation when leaving the page, credentials, and server authorization remain application responsibilities.

    For an already-established session flag, a declarative alternative is:

    import { Navigate } from "react-router-dom"
    
    function LoginRedirect({ isAuthenticated }) {
      if (isAuthenticated) {
        return <Navigate to="/dashboard" replace />
      }
      return <p>Please sign in</p>
    }
    

    replace changes the current history entry; it does not guarantee that the entire previous history disappears.

11. How do you pass props to a route component in React Router v6?

    In React Router v6, you can pass props to a route component using the element prop in the <Route> component.

    import { Routes, Route } from 'react-router-dom';
    
    function MyComponent({ propValue }) {
      return <div>Prop Value: {propValue}</div>;
    }
    
    function App() {
      return (
        <Routes>
          <Route path="/my-route" element={<MyComponent propValue="Hello" />} />
        </Routes>
      );
    }
    

    In this example, the propValue prop is passed to the MyComponent component when rendering the /my-route route.

Official references

• React Router v6.30.6 documentation
• v6 useNavigate
• v6 nested routes and ranked matching
• Current Declarative, Data, and Framework modes

📚 Related React Interview Questions

Continue your React JS interview questions preparation with these related topics: