🔹MCQs Of Class 16
useParams and useNavigate in React Router
1. What is the primary purpose of
the useParams hook in React Router?
A)
To navigate programmatically to another route
B) To extract dynamic parameters from the URL
C) To redirect users to a new route
D) To fetch data from an API
Answer: B
2. How do you import useParams in a
React component?
A)
import { useParams } from 'react-router-dom';
B) import useParams from 'react-router-dom';
C) import { useParams } from 'react';
D) import useParams from 'react-router';
Answer: A
3. Given the route path /products/:id,
what will useParams return if the URL is /products/10?
A)
{}
B) { id: 10 }
C) { productId: 10 }
D) undefined
Answer: B
4. What does useNavigate return?
A)
A function to get URL parameters
B) A component to display routes
C) A function to programmatically navigate between routes
D) The current URL path
Answer: C
5. How do you navigate
programmatically to /home using useNavigate?
A)
navigate('/home');
B) navigate.to('/home');
C) useNavigate('/home');
D) navigate.go('/home');
Answer: A
6. What argument does useNavigate
take to move back in history?
A)
-1
B) 1
C) 0
D) null
Answer: A
7. Which component is used to create
links that update the URL without reloading the page?
A)
<NavLink>
B) <Anchor>
C) <Link>
D) <RouterLink>
Answer: C
8. What will happen if you navigate
to a route with a parameter that doesn’t exist in your data?
A)
The page crashes
B) The page redirects to /home
C) The page shows "not found" or similar error
D) Nothing happens
Answer: C
9. To access the location state
passed during navigation, which hook do you use?
A)
useNavigate
B) useParams
C) useLocation
D) useRouteMatch
Answer: C
10. Which of these hooks helps you
redirect a user when a condition fails?
A)
useParams
B) useNavigate
C) useLocation
D) useHistory
Answer: B
11. What should you do if you want
to replace the current route instead of pushing a new entry to history?
A)
navigate('/path')
B) navigate('/path', { replace: true })
C) useNavigate.replace('/path')
D) navigate.replace('/path')
Answer: B
12. What kind of values can be
passed as route parameters?
A)
Only strings
B) Strings or numbers (converted to strings in URL)
C) Objects
D) Functions
Answer: B
13. How do you define a dynamic
route parameter in the route path?
A)
/product/*
B) /product/:id
C) /product/?id
D) /product/{id}
Answer: B
14. What does the navigate(1) call
do?
A)
Goes forward one page in the browser history
B) Goes back one page
C) Navigates to page number 1
D) Reloads the current page
Answer: A
15. Where do you typically use the useParams
hook?
A)
In the component rendered by the route with dynamic segments
B) In the main App component
C) In the Link component
D) In CSS files
Answer: A
16. What does this navigate(-1)
command do?
A)
Navigates to the first route
B) Navigates back to the previous page
C) Navigates forward one page
D) Reloads the current page
Answer: B
17. What is the type of the value
returned by useParams()?
A)
String
B) Object
C) Array
D) Number
Answer: B
18. Which hook allows you to trigger
navigation in event handlers like onClick?
A)
useParams
B) useNavigate
C) useEffect
D) useState
Answer: B
19. To nest routes inside a
component, which React Router component is used?
A)
<Route>
B) <Outlet>
C) <Switch>
D) <Navigate>
Answer: B
20. What do you pass as the second
argument to navigate() to pass additional state?
A)
{ state: {...} }
B) { data: {...} }
C) { params: {...} }
D) { history: {...} }
Answer: A
21. How can you access URL query
parameters in React Router v6?
A)
Using useParams()
B) Using useLocation() and URLSearchParams
C) Using useNavigate()
D) React Router does not support query parameters
Answer: B
22. What will happen if you call navigate('/login',
{ replace: true })?
A)
Adds '/login' to history stack
B) Replaces current entry in history with '/login'
C) Navigates to '/login' and clears history
D) Does nothing
Answer: B
23. Which React Router hook replaced
useHistory in v6?
A)
useNavigate
B) useParams
C) useRouteMatch
D) useLocation
Answer: A
24. If you want to pass state while
navigating and access it in the next page, which hook do you use?
A)
useState
B) useLocation
C) useParams
D) useNavigate
Answer: B
25. What is the purpose of the replace
option in the navigate function?
A)
To reload the page
B) To push a new history entry
C) To replace the current history entry
D) To clear all history
Answer: C
26. Which of the following correctly
defines a dynamic route?
A)
<Route path="/profile/:userId" element={<Profile />} />
B) <Route path="/profile/*" element={<Profile />} />
C) <Route path="/profile" element={<Profile />} />
D) <Route path="/profile/{userId}" element={<Profile />}
/>
Answer: A
27. How would you programmatically
navigate to the previous page?
A)
navigate(0)
B) navigate(-1)
C) navigate(1)
D) navigate('/back')
Answer: B
28. What will useParams() return if
the current URL does not match any dynamic segments?
A)
undefined
B) {} (empty object)
C) null
D) Throws an error
Answer: B
29. What is required to use useNavigate
in your component?
A)
The component must be inside a <Router> component
B) You must import BrowserRouter inside the component
C) You must pass a navigate function as prop
D) Nothing special is required
Answer: A
30. Which of these is a correct way
to import both useParams and useNavigate?
A)
import { useParams, useNavigate } from 'react-router-dom';
B) import useParams, useNavigate from 'react-router-dom';
C) import { useParams } from 'react-router'; import { useNavigate } from
'react-router-dom';
D) import useParams from 'react-router-dom'; import useNavigate from
'react-router-dom';
Answer: A
31. Which React Router hook can
access the current URL pathname?
A)
useParams
B) useLocation
C) useNavigate
D) useHistory
Answer: B
32. How do you handle undefined
route parameters in your component?
A)
Redirect or show "Not Found" message
B) Ignore and show blank page
C) Use default props
D) It is not possible to handle undefined parameters
Answer: A
33. Which is the correct way to
define a route with multiple parameters?
A)
/product/:id/:color
B) /product/id/color
C) /product/:id&:color
D) /product/{id}/{color}
Answer: A
34. What does <Outlet /> do
inside a component?
A)
Displays matched child routes
B) Redirects to home page
C) Passes params to children
D) Shows loading spinner
Answer: A
35. What type of value does useNavigate()
return?
A)
A React component
B) A function
C) An object
D) An array
Answer: B
36. Can you use useParams outside of
a route component?
A)
Yes, anywhere in the app
B) No, only inside components rendered by routes with params
C) Yes, but only inside App.js
D) No, only in class components
Answer: B
37. Which method is used to
programmatically navigate to a different route with React Router v6?
A)
history.push('/path')
B) navigate('/path')
C) window.location = '/path'
D) redirect('/path')
Answer: B
38. If you want to add a
"forward" button using useNavigate, which parameter do you use?
A)
navigate(1)
B) navigate(-1)
C) navigate(0)
D) navigate('forward')
Answer: A
39. How do you pass props to
components rendered by a <Route>?
A)
Directly via element attribute
B) Using URL params only
C) Using React context or state management
D) React Router doesn’t support passing props
Answer: C
40. What does navigate(-2) do?
A)
Goes back two pages in history
B) Goes forward two pages
C) Reloads current page twice
D) Throws an error
Answer: A
41. Which hook lets you know the
current location object, including pathname, search, and hash?
A)
useNavigate
B) useParams
C) useLocation
D) useRouteMatch
Answer: C
42. Can useNavigate be used outside
components?
A)
Yes
B) No, only inside React components/hooks
C) Only in App.js
D) Only in index.js
Answer: B
43. How do you programmatically
navigate and pass query parameters?
A)
navigate('/path?name=value')
B) navigate('/path', { query: { name: 'value' } })
C) navigate('/path', { params: { name: 'value' } })
D) React Router does not support query params
Answer: A
44. Which of these statements is
true about useParams?
A)
It can read URL parameters defined by route path
B) It changes URL parameters dynamically
C) It navigates to a route
D) It replaces the current route
Answer: A
45. What happens if you call navigate('/')
without any options?
A)
Pushes / to history stack
B) Replaces current entry
C) Reloads the page
D) Throws error
Answer: A
46. Which React Router component is
required at the root of your app?
A)
<Router> or <BrowserRouter>
B) <Route>
C) <Link>
D) <Switch>
Answer: A
47. Which hook is best for reading
URL params like /user/:id?
A)
useNavigate
B) useLocation
C) useParams
D) useHistory
Answer: C
48. Which statement about useNavigate
is correct?
A)
It returns a navigation function
B) It returns an object with history
C) It returns the current pathname
D) It returns route params
Answer: A
49. When navigating with navigate('/dashboard',
{ replace: true }), what happens?
A)
User navigates to dashboard and cannot go back to previous page
B) Navigation fails
C) User navigates but can still go back
D) Browser reloads
Answer: A
50. Which hook allows conditional
navigation inside useEffect?
A)
useNavigate
B) useParams
C) useLocation
D) useState
Answer: A
