🔹MCQs Of Class 15
React Routing (React Router DOM)
1. What package is used to add
routing capabilities in React applications?
A)
react-router
B) react-router-dom
C) react-router-native
D) react-router-router
Answer: B
2. Which command is used to install
react-router-dom using npm?
A)
npm install react-router
B) npm add react-router-dom
C) npm install react-router-dom
D) npm get react-router-dom
Answer: C
3. Which component is used to define
all routes in React Router v6?
A)
<Route>
B) <Router>
C) <Routes>
D) <Switch>
Answer: C
4. Which component is used to wrap
the entire routing structure?
A)
<Router>
B) <BrowserRouter>
C) <Route>
D) <Link>
Answer: B
5. How do you define a route for the
Home page with path /?
A)
<Route element={<Home />} path="/" />
B) <Route path="/" component={Home} />
C) <Route path="/" element={<Home />} />
D) <Route path="/" render={Home} />
Answer: C
6. What component should you use to
navigate between routes without reloading the page?
A)
<a>
B) <Link>
C) <Navigate>
D) <Redirect>
Answer: B
7. Which attribute is used in <Link>
to specify the target route?
A)
href
B) to
C) path
D) link
Answer: B
8. How do you handle undefined
routes and show a 404 page?
A)
Use <Route path="/404" />
B) Use <Route path="*" />
C) Use <Route path="/notfound" />
D) Use <Route exact />
Answer: B
9. In React Router v6, which
component is used to programmatically navigate?
A)
useHistory
B) useNavigate
C) Redirect
D) navigateTo
Answer: B
10. Which of the following is true
about <Link> compared to <a>?
A)
<Link> causes full page reload
B) <a> prevents page reload
C) <Link> allows SPA navigation without reload
D) Both cause page reload
Answer: C
11. How do you create nested routes
in React Router v6?
A)
Using <Switch>
B) Using <Route> inside another <Route> with children routes
C) Using <Routes> inside <Link>
D) Using useNavigate
Answer: B
12. Which component is used inside a
parent route to render nested routes?
A)
<Outlet>
B) <Render>
C) <Children>
D) <Nested>
Answer: A
13. What does <Route
path="*"> mean in React Router?
A)
Match only the root path
B) Match any unmatched route (wildcard)
C) Match all routes exactly
D) Match routes with no parameters
Answer: B
14. How do you access URL parameters
in a component?
A)
props.match.params
B) useParams()
C) this.props.params
D) useRouteMatch()
Answer: B
15. Which hook is used to access the
current route parameters?
A)
useRoute()
B) useMatch()
C) useParams()
D) useRouteMatch()
Answer: C
16. How do you redirect a route /home
to / in React Router v6?
A)
<Redirect from="/home" to="/" />
B) <Navigate from="/home" to="/" />
C) <Navigate to="/" replace /> in route with path /home
D) <Route path="/home" element={<Redirect to="/"
/>} />
Answer: C
17. Which React Router version
introduced <Routes>?
A)
v4
B) v5
C) v6
D) v3
Answer: C
18. What is the purpose of <BrowserRouter>?
A)
To enable server-side routing
B) To use hash-based URLs
C) To keep UI in sync with the URL in the browser history
D) To define all route paths
Answer: C
19. What does the replace prop in <Navigate>
do?
A)
Replaces the route without adding a new entry in history
B) Adds a new entry in browser history
C) Reloads the page
D) Does nothing
Answer: A
20. Can you use multiple <Route>
components inside a single <Routes>?
A)
Yes
B) No
Answer: A
21. Which is the correct way to pass
parameters in a route path?
A)
/user/{id}
B) /user/:id
C) /user?id
D) /user/*id
Answer: B
22. How do you define a route for a
dynamic user ID in React Router?
A)
<Route path="/user/:id" />
B) <Route path="/user/{id}" />
C) <Route path="/user/id" />
D) <Route path="/user/id?" />
Answer: A
23. How does React Router achieve
SPA navigation?
A)
By reloading the page on every navigation
B) By preventing the default link behavior and using the History API
C) By changing the server routes
D) By using server-side rendering
Answer: B
24. Which of the following
components is NOT part of React Router DOM?
A)
<BrowserRouter>
B) <Link>
C) <Switch> (in v5)
D) <NavigateTo>
Answer: D
25. How do you handle navigation
programmatically in a React function component?
A)
Using history.push()
B) Using useNavigate() hook
C) Using window.location
D) Using <Link>
Answer: B
26. Which is true about the path
prop in <Route>?
A)
It is optional
B) It defines the URL to match
C) It must always be /
D) It cannot contain parameters
Answer: B
27. How do you create a link to /contact
page?
A)
<Link href="/contact">Contact</Link>
B) <Link to="/contact">Contact</Link>
C) <a to="/contact">Contact</a>
D) <a href="contact">Contact</a>
Answer: B
28. What happens if two <Route>
components have the same path?
A)
Only the first is matched
B) Both render together
C) The last one overrides the previous
D) React Router throws an error
Answer: A
29. What is the significance of <Outlet>?
A)
It renders the content of the matched child route
B) It creates a link
C) It redirects routes
D) It reloads the page
Answer: A
30. How do you install
react-router-dom using yarn?
A)
yarn add react-router
B) yarn install react-router-dom
C) yarn add react-router-dom
D) yarn get react-router-dom
Answer: C
31. Can you use React Router without
wrapping your app in <BrowserRouter>?
A)
Yes
B) No
Answer: B
32. How do you specify the default
route for the app?
A)
<Route path="/" element={<Home />} />
B) <Route default element={<Home />} />
C) <Route exact element={<Home />} />
D) <Route index element={<Home />} />
Answer: A
33. What happens if you don’t define
a route for a URL in React Router?
A)
It redirects to Home page
B) It throws a 404 error by default
C) Nothing is rendered or a blank page is shown
D) React Router automatically creates a route
Answer: C
34. How can you create a 404 page in
React Router v6?
A)
<Route path="*" element={<NotFound />} />
B) <Route path="/404" element={<NotFound />} />
C) <Route default element={<NotFound />} />
D) React Router handles 404 automatically
Answer: A
35. Which React Router hook lets you
access the navigation function?
A)
useParams()
B) useNavigate()
C) useHistory()
D) useLocation()
Answer: B
36. What component replaces <Switch>
in React Router v6?
A)
<Routes>
B) <Router>
C) <Switch> still used
D) <Navigate>
Answer: A
37. How to pass props to components
rendered by <Route>?
A)
Use render props
B) Use element with JSX <Component prop={value} />
C) Pass as attributes in <Route>
D) Cannot pass props
Answer: B
38. What is the role of element prop
in <Route>?
A)
Specifies the component to render on route match
B) Defines the URL path
C) Specifies the navigation path
D) Contains child routes
Answer: A
39. Which React Router hook gives
current location object?
A)
useLocation()
B) useParams()
C) useNavigate()
D) useHistory()
Answer: A
40. How do you create a link with
active styling?
A)
<Link activeClassName="active" to="/" />
B) <NavLink to="/" activeClassName="active" />
C) <Link to="/" activeStyle="color:red" />
D) <a href="/" class="active" />
Answer: B
41. How do you specify a route that
renders a component only if the path matches exactly?
A)
Using exact prop (in React Router v5)
B) Using strict prop
C) Using index prop in React Router v6
D) Both A and C depending on version
Answer: D
42. What is the default behavior of <Link>
when clicked?
A)
Causes full page reload
B) Changes URL without reload
C) Opens link in new tab
D) Does nothing
Answer: B
43. Can React Router handle query
parameters in URLs?
A)
Yes, via useLocation hook
B) No, React Router does not support query params
C) Only with custom code
D) Only with <Route> params
Answer: A
44. Which React Router hook is used
to get the current URL path?
A)
useParams()
B) useNavigate()
C) useLocation()
D) useRouteMatch()
Answer: C
45. What happens if you use <Route
path="/"> without exact in React Router v5?
A)
Only matches root /
B) Matches all paths starting with /
C) Throws an error
D) Matches only subpaths
Answer: B
46. How to navigate back
programmatically?
A)
useNavigate(-1)
B) useHistory().goBack()
C) window.history.back()
D) All of the above depending on version and context
Answer: D
47. What is React Router’s default
URL matching behavior?
A)
Exact match only
B) Prefix matching
C) Regex matching
D) Case insensitive matching
Answer: B
48. How to prevent adding new entry
to history on navigation?
A)
Use <Navigate replace />
B) Use <Link replace />
C) Use useNavigate({ replace: true })
D) Both A and C
Answer: D
49. What hook returns the current
pathname?
A)
useLocation()
B) usePathname()
C) useParams()
D) useRoute()
Answer: A
50. React Router DOM supports which
navigation modes?
A)
Browser History API (HTML5 history)
B) Hash History
C) Memory History
D) All of the above
Answer: D
