React Router

Last Updated :
Discuss
Comments

Question 1

Which of the following routers uses the HTML5 History API?

  • HashRouter

  • BrowserRouter

  • MemoryRouter


  • FileRouter

Question 2

Which of the following is NOT a feature of React Router?

  • Declarative Routing

  • Dynamic Routing

  • Server-side rendering

  • Nested Routes

Question 3

Which of the following is true about React Router?

  • It only works with class components

  • It provides a BrowserRouter component for client-side routing

  • It doesn't support nested routes

  • It requires Redux for routing functionality

Question 4

Which component is used to declare individual routes in React Router?

  • <NavLink>

  • <Route>

  • <Link>

  • <BrowserRouter>

Question 5

In the following example, what will useParams() return?

JavaScript 
<Route path="/product/:id" element={<Product />} />


  • A function to navigate between products

  • An object containing { id: "productId" }


  • A string with the product id

  • The complete URL path

Question 6

In which environment would you typically use MemoryRouter in React Router?

  • In production environments with dynamic routes

  • In testing or non-browser environment

  • When managing browser history

  • For static web applications

Question 7

What is the main benefit of nested routes in React Router?

  • They allow routing based on query parameters.

  • They enable routing with custom URL hashes.

  • They make routing simpler and support hierarchical and complex structures.

  • They replace the use of useNavigate().

Question 8

What is the correct syntax to pass parameters in a dynamic route like /page/:id?

  • <Route path="/page" element={<Page />} />

  • <Route path="/page/:id" element={<Page />} />

  • <Route path="/page" params={{id}} />

  • <Route path="/page" element={<Page id />} />

Question 9

In the Product component, which of the following is the correct way to access the productId from the URL?

  • const { id } = useParams();

  • const { productId } = useParams();

  • const { product } = useParams();

  • const { productId } = useLocation();

Question 10

What happens when the following code is executed in a React Router v6 application?

JavaScript 
const navigate = useNavigate();
navigate('/about', { replace: true });


  • Navigates to /about and replaces the history entry

  • Navigates to /about and adds a new history entry

  • Causes a page refresh

  • Logs an error

There are 10 questions to complete.

Take a part in the ongoing discussion