What is React Router?

Expected Interview Answer

Step-by-Step Explanation

1. Step 1

   Install the router

   Add react-router-dom and wrap your app in a router provider such as BrowserRouter or createBrowserRouter.

2. Step 2

   Declare routes

   Map each URL path to the component that should render, using Routes and Route (or a route object array).

3. Step 3

   Add navigation

   Use Link or NavLink instead of anchor tags so clicks navigate without a full-page reload.

4. Step 4

   Read URL params

   Use useParams to read dynamic segments like /users/:id inside the rendered component.

5. Step 5

   Navigate programmatically

   Use the useNavigate hook to redirect after events such as a successful form submit or login.

Code Example

import { BrowserRouter, Routes, Route, Link, useParams } from 'react-router-dom'

function User() {
  const { id } = useParams()
  return <h2>User {id}</h2>
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/users/42">User 42</Link>
      </nav>
      <Routes>
        <Route path="/" element={<h2>Home</h2>} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  )
}

Follow-up Questions

• What is the difference between BrowserRouter and HashRouter?
• How do nested routes and Outlet work?
• How do you read query parameters in React Router?
• What is the difference between Link and NavLink?
• How do you protect a route so only logged-in users can see it?