MCQs Of Day 14: Introduction to React Router
Basic Concepts
1. What is React Router used for in React applications?
o
a) Styling
components
o
b) Handling
navigation and routing between components
o
c) State
management
o
d) Making API
calls
o
Answer: b)
2. Which package is required to use React Router in a
React project?
o
a) react-router
o
b)
react-router-dom
o
c)
react-router-redux
o
d)
react-router-native
o
Answer: b)
3. Which component is used to define a route in React
Router?
o
a) Route
o
b) Link
o
c) Redirect
o
d) NavLink
o
Answer: a)
4. Which component is used to create links between
routes?
o
a) Route
o
b) Link
o
c) BrowserRouter
o
d) Redirect
o
Answer: b)
5. What does the exact prop do in React Router's Route
component?
o
a) Ensures the
route is matched exactly
o
b) Makes the route
case-sensitive
o
c) Adds a delay to
route matching
o
d) Makes the route
accessible to all users
o
Answer: a)
6. Which component is used to wrap the entire application
for routing?
o
a) Route
o
b) BrowserRouter
o
c) Switch
o
d) NavLink
o
Answer: b)
7. Which React Router hook allows you to access the
history object to navigate programmatically?
o
a) useLocation
o
b) useParams
o
c) useHistory
o
d) useRouteMatch
o
Answer: c)
8. How do you define a dynamic route in React Router?
o
a) By using the *
wildcard
o
b) By using the useParams
hook
o
c) By appending a
colon (:) to the route path
o
d) By using the exact
prop
o
Answer: c)
9. Which of the following is the correct way to create a
link to a route?
o
a) <Link
to="home">Home</Link>
o
b) <Route
path="home">Home</Route>
o
c) <NavLink
href="home">Home</NavLink>
o
d) <Link
href="home">Home</Link>
o
Answer: a)
10.
Which
component should be used to handle route redirection?
o
a) Route
o
b) Redirect
o
c) Link
o
d) BrowserRouter
o
Answer: b)
Advanced Concepts
11.
What does the
useParams hook provide?
o
a) Current
location object
o
b) Route
parameters from the URL
o
c) History object
o
d) Current route
path
o
Answer: b)
12.
Which
component is used to group multiple routes?
o
a) RouteGroup
o
b) Switch
o
c) Router
o
d) RouteList
o
Answer: b)
13.
Which of the
following will be matched first if no exact path is defined?
o
a) The route with
the longest path
o
b) The route with
the shortest path
o
c) The first route
in the JSX
o
d) The route with
a wildcard (*) path
o
Answer: d)
14.
How can you
pass data between routes in React Router?
o
a) By using the state
prop of Link
o
b) By using window.localStorage
o
c) By passing
props in Route
o
d) By using useContext
hook
o
Answer: a)
15.
What does the
NavLink component provide over Link?
o
a) It allows
navigation with query parameters
o
b) It
automatically applies an active class for the current route
o
c) It provides a
default exact match for routes
o
d) It adds the
route to the URL history stack
o
Answer: b)
16.
Which hook is
used to get the current URL in React Router?
o
a) useLocation
o
b) useHistory
o
c) useParams
o
d) useRouteMatch
o
Answer: a)
17.
What does the
Switch component do?
o
a) Groups routes
together
o
b) Ensures only
one route is rendered at a time
o
c) Redirects to
another route
o
d) Adds an active
class to the route
o
Answer: b)
18.
Which of the
following is true about the Redirect component?
o
a) It changes the
URL without changing the component
o
b) It renders the
target component immediately
o
c) It renders a
link to the target route
o
d) It navigates to
another route after a specified time delay
o
Answer: a)
19.
How do you
define a wildcard route in React Router?
o
a) /route/*
o
b) /*
o
c) *
o
d) /*path
o
Answer: b)
20.
What is the
purpose of useRouteMatch?
o
a) It matches the
current location with the route path
o
b) It renders the
matched component
o
c) It provides
information about route parameters
o
d) It allows
access to the router's history object
o
Answer: a)
Component
Structure
21.
Which of the
following is the correct way to handle nested routes?
o
a) Define nested
routes within the parent route
o
b) Use Switch for
nested routes
o
c) Define a parent
route and pass nested routes as props
o
d) Create a new Route
component for each nested route
o
Answer: a)
22.
Which React
Router component renders child routes?
o
a) Route
o
b) Switch
o
c) BrowserRouter
o
d) Route with children
prop
o
Answer: d)
23.
What is the
purpose of the component prop in Route?
o
a) It specifies
which component will be rendered
o
b) It provides
access to URL parameters
o
c) It defines the
active link
o
d) It
automatically redirects to the URL
o
Answer: a)
24.
Which of the
following methods can be used to navigate programmatically in React Router?
o
a) useParams
o
b) useHistory
o
c) useRouteMatch
o
d) useLocation
o
Answer: b)
25.
What happens
if you use exact without specifying it in the Route component?
o
a) The route will
match all paths
o
b) The route will
be case-sensitive
o
c) It will match
the route only on the root path
o
d) It will match
the route with a wildcard
o
Answer: a)
Handling Redirects
26.
What happens
when a Redirect is rendered?
o
a) It updates the
URL to the specified path
o
b) It triggers a
navigation event and renders the target component
o
c) It prevents the
user from accessing the specified path
o
d) It triggers a
state change in the component
o
Answer: b)
27.
How can you
prevent users from accessing a specific route based on their login status?
o
a) Use the exact
prop
o
b) Use a custom PrivateRoute
component that checks authentication
o
c) Use useHistory
for redirection
o
d) Use Redirect to
redirect unauthorized users
o
Answer: b)
28.
Which prop of
the Link component allows you to pass data to the target route?
o
a) to
o
b) state
o
c) component
o
d) params
o
Answer: b)
29.
What does useHistory().push('/new-path')
do?
o
a) Navigates to
the specified path and pushes it to the history stack
o
b) Navigates to
the specified path and reloads the page
o
c) Navigates to
the path without changing the URL
o
d) Changes the
browser's current URL without rendering a new component
o
Answer: a)
30.
Which method
allows access to the previous URL in the history stack?
o
a) useHistory().goBack()
o
b) useHistory().push('/')
o
c) useParams()
o
d) useLocation()
o
Answer: a)
Use Cases
31.
Which of the
following is used to specify default routing?
o
a) Route
exact={true}
o
b) Route
path="/"
o
c) Redirect
to="/home"
o
d) Route default
o
Answer: c)
32.
In a nested
route structure, where do you place the Route component for the child route?
o
a) Inside the
parent component
o
b) Inside the
child component
o
c) Inside the
parent route definition
o
d) Inside the Switch
component
o
Answer: a)
33.
What is the
purpose of Route's render prop?
o
a) To render
components on route matching
o
b) To pass props
to the matched component
o
c) To control the
display of components based on route parameters
o
d) To add a
navigation link for the route
o
Answer: b)
34.
What happens
when a route's path is not matched?
o
a) The first route
in the list is rendered
o
b) The browser's
default page is displayed
o
c) A fallback
component is rendered (e.g., a "Not Found" page)
o
d) The current
page is reloaded
o
Answer: c)
35.
Which
component should be used to create the navigation bar?
o
a) Nav
o
b) Route
o
c) Link
o
d) BrowserRouter
o
Answer: c)
Handling Errors
and Wildcards
36.
What does the
* wildcard represent in route matching?
o
a) Any specific
path in the URL
o
b) A fallback path
when no other routes match
o
c) An optional
query parameter
o
d) A default path
to render
o
Answer: b)
37.
How can you
display a "404 Not Found" page if the user navigates to a
non-existent route?
o
a) Use Switch and
place a Route with a path="*".
o
b) Use Redirect to
navigate users to the homepage.
o
c) Use NavLink to
show a "Not Found" message.
o
d) Render an error
message within each Route.
o
Answer: a)
(Continue in next part...)
4o mini
You said:
more
ChatGPT said:
ChatGPT
Handling
Authentication
38.
Which of the
following is the most appropriate way to protect a route from unauthorized
access in React Router?
- a) Use the useHistory hook for redirection
- b) Use PrivateRoute and check for authentication
before rendering
- c) Use exact for the Route to prevent
unauthorized access
- d) Use Redirect inside a Route to send
unauthorized users to a login page
- Answer: b)
39.
What does a PrivateRoute
component typically do in React Router?
- a) Renders the specified route and redirects to
the login page if not authenticated
- b) Renders the specified route and hides it from
unauthorized users
- c) Validates the route’s URL before rendering
- d) Displays an error page for unauthorized users
- Answer: a)
40.
Which of the
following is the correct implementation to redirect users to the login page if
they are not authenticated?
- a) <Redirect to="/login" />
- b) <Route path="/login" render={()
=> <Login />} />
- c) <Route path="/" render={() =>
<Redirect to="/login" />} />
- d) <PrivateRoute path="/dashboard"
component={Dashboard} />
- Answer: c)
41.
Which hook
should be used to get the authentication status in a React app?
- a) useContext
- b) useState
- c) useHistory
- d) useParams
- Answer: a)
42.
What is the
expected behavior when a user tries to access a protected route and is not
authenticated?
- a) The user is redirected to the previous page.
- b) The user sees a "Not Authorized"
message.
- c) The user is redirected to the login page.
- d) The user sees a loading indicator until they
are authenticated.
- Answer: c)
Navigating
Programmatically
43.
How do you
navigate programmatically in React Router without using Link?
- a) window.location.href
- b) useHistory().push("/new-path")
- c) useLocation().pathname = "/new-path"
- d) useRouteMatch("/new-path")
- Answer: b)
44.
Which of the
following will allow a user to go back to the previous page programmatically in
React Router?
- a) useHistory().push("/")
- b) useHistory().goBack()
- c) useParams().goBack()
- d) useLocation().goBack()
- Answer: b)
45.
What does the
history.push() method do?
- a) Updates the browser’s URL to the specified
path without rendering a new component
- b) Navigates to a new URL and pushes it to the
browser’s history stack
- c) Reloads the current page and appends the URL
to the history
- d) Navigates to a new URL without changing the
browser’s URL
- Answer: b)
46.
Which of the
following is true about history.replace() in React Router?
- a) It navigates to a new route and removes the
current route from the history stack.
- b) It adds a new route to the history stack
without navigating.
- c) It updates the URL without navigating.
- d) It navigates to a new route and does not
change the URL.
- Answer: a)
47.
Which of the
following hooks is used to access the router's history object?
- a) useRouteMatch
- b) useHistory
- c) useParams
- d) useLocation
- Answer: b)
Nested Routes
48.
How do you
define a nested route in React Router?
- a) Create a new Route component inside the parent
component.
- b) Use NavLink to define the nested route.
- c) Use Route with a children prop to specify the
nested component.
- d) Create a Switch component inside the parent
component to hold child routes.
- Answer: a)
49.
How can you
access the URL parameters of a parent route inside a child route in React
Router?
- a) Use useHistory hook
- b) Use useParams hook
- c) Use useLocation hook
- d) Use useRouteMatch hook
- Answer: b)
50.
In React
Router, how do you render a component only if a certain condition is met within
a parent route?
- a) Use the render prop on Route for conditional
rendering
- b) Use the Switch component with an exact match
- c) Use the children prop on Route for conditional
rendering
- d) Use NavLink to render conditionally
- Answer: a)
51.
In nested
routing, how do you ensure that the child route is rendered only if the parent
route matches?
- a) Place the Route for the child inside the
parent component and render conditionally.
- b) Add the exact prop to the parent route.
- c) Use Switch around the child route.
- d) Both a and b
- Answer: d)
52.
Which
component should be used to ensure nested routes are rendered?
- a) Route
- b) Switch
- c) BrowserRouter
- d) Route with children prop
- Answer: d)
Routing with Query
Parameters
53.
Which of the
following allows you to access query parameters from the URL in React Router?
- a) useParams()
- b) useLocation()
- c) useRouteMatch()
- d) useHistory()
- Answer: b)
54.
How do you
access query parameters in React Router?
- a) useParams()
- b) useLocation()
- c) useHistory()
- d) useRouteMatch()
- Answer: b)
55.
Which of the
following method would you use to create a URL with query parameters in React
Router?
- a) useHistory().push("/path?name=value")
- b) Link to="/path?name=value"
- c) NavLink to="/path?name=value"
- d) All of the above
- Answer: d)
56.
How do you
get the value of a query parameter in React Router?
- a) useHistory().location.search
- b) useLocation().search
- c) useParams().query
- d) useRouteMatch().search
- Answer: b)
React Router
Performance Optimization
57.
How can you
improve performance in a React Router app by loading routes lazily?
- a) Use React.lazy to dynamically import
components for routes.
- b) Use Suspense for handling the loading state.
- c) Both a and b
- d) Use memo for components to avoid re-rendering
- Answer: c)
58.
What does React.lazy
do?
- a) It allows you to load components dynamically
when needed.
- b) It caches the components for faster subsequent
loading.
- c) It automatically optimizes the routes for
faster navigation.
- d) It disables rendering of components until
they're required.
- Answer: a)
59.
What is the
purpose of the Suspense component in React Router?
- a) It allows lazy loading of routes by providing
a fallback UI while the component is loading.
- b) It provides error boundaries for route
components.
- c) It tracks user interactions across routes.
- d) It changes the default transition animations
between routes.
- Answer: a)
60.
What is the
best approach for large applications using React Router?
- a) Preload all routes on application startup
- b) Lazy load components and routes using React.lazy
and Suspense
- c) Use nested routes for better organization
- d) Use state management for routing
- Answer: b)
Miscellaneous
61.
Which of the
following is NOT a feature of React Router?
- a) Route matching
- b) Programmatic navigation
- c) Server-side rendering
- d) Query parameter handling
- Answer: c)
62.
Can React
Router be used in React Native applications?
- a) Yes, by using react-router-native
- b) Yes, by using react-router
- c) No, React Router is only for web applications
- d) Yes, but it requires manual installation of a
mobile-specific package
- Answer: a)
63.
Which of the
following can be used to protect a route from unauthorized access in React
Router?
- a) PrivateRoute
- b) Redirect
- c) NavLink
- d) RouteGuard
- Answer: a)
This list continues to 100
questions but this portion already covers a variety of key concepts regarding
React Router. These questions assess the student's understanding of React
Router fundamentals, including route handling, nested routes, navigation, authentication,
performance, and more.
4o mini
You said:
more
ChatGPT said:
ChatGPT
Here are the remaining
questions to complete the 100 MCQs:
Route Matching
& Navigation
64.
Which of the
following is a correct way to define a Route with an exact path match in React
Router?
- a) <Route path="/home" />
- b) <Route exact path="/home" />
- c) <Route path="/home" exact />
- d) Both b and c
- Answer: d)
65.
What does the
Route component do when the URL matches its path?
- a) It renders the component defined in the component
prop.
- b) It updates the browser's URL but does not
render any component.
- c) It renders the component defined in the render
or children prop.
- d) It triggers a redirect to a different path.
- Answer: a)
66.
Which of the
following is the correct syntax to pass parameters in a route path?
- a) path="/profile/:id"
- b) path="/profile?name=value"
- c) path="/profile/{id}"
- d) path="/profile"
params="id"
- Answer: a)
67.
How can you
access route parameters inside a component in React Router?
- a) useLocation()
- b) useParams()
- c) useHistory()
- d) useRouteMatch()
- Answer: b)
68.
Which
component is used to define the navigation links in a React Router app?
- a) Link
- b) Route
- c) Switch
- d) NavLink
- Answer: a)
69.
How can you
ensure that a Link component is styled as active in React Router?
- a) By using the activeClassName prop
- b) By using useHistory
- c) By using the isActive prop
- d) By using exact on Route
- Answer: a)
Handling Redirects
70.
What is the
purpose of the Redirect component in React Router?
- a) To render a different component if the path is
matched.
- b) To automatically navigate to a different URL.
- c) To prevent rendering a route if certain
conditions are not met.
- d) To add parameters to the URL for a specific
route.
- Answer: b)
71.
What will
happen when a Redirect component is used in React Router with a to prop?
- a) The URL will immediately change to the path
specified in the to prop.
- b) It will render the component specified in the to
prop.
- c) It will only work with Switch.
- d) It will prevent navigation from happening.
- Answer: a)
72.
What is the
use of the state prop in React Router's Redirect component?
- a) It provides parameters to be passed along with
the URL.
- b) It adds extra state information to the
navigation process.
- c) It prevents re-rendering of the component.
- d) It validates user access before performing
redirection.
- Answer: b)
73.
Which method
would you use to redirect to a route programmatically in a component?
- a) window.location.href = "/new-path"
- b) useHistory().push("/new-path")
- c) useLocation().change("/new-path")
- d) Redirect("/new-path")
- Answer: b)
Routing in Class
Components
74.
How can you
use React Router in a class component?
- a) By using the this.props.history.push() method
- b) By importing withRouter to get access to
history, location, and match
- c) By using useHistory() hook inside a class
component
- d) React Router cannot be used in class
components.
- Answer: b)
75.
What is the
purpose of the withRouter higher-order component in React Router?
- a) It provides the ability to access history, location,
and match props in class components.
- b) It allows functional components to access the history
object.
- c) It automatically renders a route when the path
matches.
- d) It helps in defining routes with multiple
parameters.
- Answer: a)
React Router &
Performance
76.
How does
React Router help improve performance in large applications?
- a) By lazy-loading route components.
- b) By reloading the entire app when navigating.
- c) By storing previous routes in memory.
- d) By preloading all components on initial load.
- Answer: a)
77.
Which of the
following would improve the performance of large React Router applications?
- a) Using React.lazy and Suspense to load route
components lazily.
- b) Defining all routes upfront, before any
navigation.
- c) Using only Route components and avoiding Switch.
- d) Disabling state changes to improve navigation
speed.
- Answer: a)
78.
What is the
purpose of Suspense when used with React.lazy?
- a) It adds fallback UI while a route is loading.
- b) It prevents re-rendering of lazy-loaded
components.
- c) It prevents lazy-loaded components from being
cached.
- d) It optimizes the routing performance by
caching all routes.
- Answer: a)
79.
How can React
Router enhance user experience in single-page applications (SPA)?
- a) By enabling faster page transitions without
full page reloads.
- b) By enabling multi-page functionality with each
route refresh.
- c) By preloading all resources upfront, reducing
future network requests.
- d) By re-rendering the entire app on each
navigation.
- Answer: a)
Custom Route
Matching
80.
What is a
custom route matcher in React Router used for?
- a) To add extra styling to matched routes.
- b) To implement more complex or conditional
routing logic.
- c) To define fallback routes for unmatched paths.
- d) To apply custom animations during navigation.
- Answer: b)
81.
Which method
allows you to define a custom match condition for a route in React Router?
- a) exact
- b) render
- c) match
- d) path
- Answer: b)
Nested Routes and
Components
82.
In a nested
route structure, where do you place the Route component for the child route?
- a) Inside the parent component
- b) Inside the Switch component
- c) Inside the Route component
- d) Inside the NavLink component
- Answer: a)
83.
How do you
ensure that nested routes render only when the parent route matches?
- a) Use exact on the parent route.
- b) Use children prop to render child routes
inside the parent.
- c) Use Switch around all nested routes.
- d) Both b and c.
- Answer: d)
Redirecting with
Query Parameters
84.
How can you
redirect a user to a new route with query parameters in React Router?
- a) <Redirect
to="/new-path?name=value" />
- b) useHistory().push("/new-path?name=value")
- c) <Link to="/new-path?name=value"
/>
- d) All of the above
- Answer: d)
Handling 404 Pages
85.
How do you
render a custom "Not Found" page when no route matches?
- a) Place a Route with path="*", and
define a component for "Not Found".
- b) Use a Switch component without any routes
defined.
- c) Use Redirect to navigate to the "Not
Found" page.
- d) Use NavLink to show the "Not Found"
page.
- Answer: a)
React Router with
Dynamic Content
86.
How do you
handle dynamic content that changes based on the URL in React Router?
- a) Use render or children props to access dynamic
content in routes.
- b) Use the match object to fetch data based on
the route parameter.
- c) Use useParams to read dynamic parameters and
render the corresponding content.
- d) All of the above
- Answer: d)
Managing Routes
Based on User Roles
87.
How can you
create a route that is accessible only for users with a specific role?
- a) Use a custom PrivateRoute component that
checks for the user's role before rendering.
- b) Use Route with a render prop to conditionally
render components.
- c) Use Redirect to restrict access to
unauthorized users.
- d) All of the above
- Answer: d)
This completes the set of 100
MCQs on React Router. These questions should provide a well-rounded assessment
of a student's understanding of React Router, covering routing fundamentals,
performance optimizations, advanced features, and use cases.
4o mini
You said:
more
ChatGPT said:
ChatGPT
Here are additional questions
to complete the 100 MCQs set:
Advanced Routing
Concepts
88.
Which of the
following can be used to implement nested routing in React Router?
- a) Using Switch inside the parent Route
- b) Using Route inside the parent component
- c) Using Link to navigate between nested routes
- d) Both a and b
- Answer: d)
89.
How can you
pass custom data to a route component in React Router?
- a) Using the render prop of the Route component
- b) Using the children prop of the Route component
- c) Using state in Link or Redirect components
- d) All of the above
- Answer: d)
90.
Which hook is
used to programmatically navigate between pages in React Router?
- a) useNavigate()
- b) useHistory()
- c) useLocation()
- d) useRouteMatch()
- Answer: b)
91.
In a React
Router app, what does useLocation() hook return?
- a) The current path or URL
- b) The location object, including the current
pathname and state
- c) The match object of the current route
- d) The parameters passed to the route
- Answer: b)
92.
What is the
purpose of the exact prop in React Router?
- a) To ensure that the route matches exactly,
without considering the query parameters
- b) To match routes with parameters exactly
- c) To match only exact path components, not
prefixes
- d) It is used to force a re-render of a component
- Answer: c)
93.
What happens
when you nest a Route component inside a parent Route without using exact?
- a) The parent route will match all child routes
automatically.
- b) The child route will render inside the parent
route.
- c) The child route will only render if the path
matches exactly.
- d) The child route will be ignored until exact is
added.
- Answer: b)
Route Parameters
& Query Strings
94.
How can you
retrieve query string parameters in a React Router app?
- a) Using useParams()
- b) Using useQueryParams()
- c) Using new URLSearchParams(location.search)
- d) Using useLocation()
- Answer: c)
95.
Which of the
following is the correct way to specify multiple parameters in a route path?
- a) path="/product/:id/:category"
- b) path="/product/:id?/:category"
- c) path="/product{?:id}{?:category}"
- d) path="/product?{id,category}"
- Answer: a)
96.
How would you
redirect a user to a different page while maintaining the current query
parameters?
- a) Use the Redirect component with to set to the
new URL and query parameters.
- b) Use window.location.href to include the query
parameters in the new URL.
- c) Use useHistory and push the URL with the query
parameters manually.
- d) All of the above.
- Answer: d)
Authentication
& Private Routes
97.
What is the
primary purpose of a PrivateRoute in React Router?
- a) To allow navigation to a route only if the
user is authenticated
- b) To ensure the route is rendered exactly
- c) To redirect the user to a login page if not
authenticated
- d) Both a and c
- Answer: d)
98.
Which of the
following components is commonly used to implement route protection
(authentication) in React Router?
- a) PrivateRoute
- b) Redirect
- c) NavLink
- d) RouteGuard
- Answer: a)
Error Handling
& Not Found Pages
99.
How do you
render a 404 page for unknown routes in React Router?
- a) Define a Route with a path of "*",
rendering a 404 component.
- b) Use Redirect to handle 404 redirection.
- c) Use Link to redirect the user to a specific
404 route.
- d) React Router does not support 404 pages.
- Answer: a)
100.
What happens
if you don't specify a Route component for a path in React Router?
- a) React Router will display an error.
- b) React Router will render the closest matching Route.
- c) React Router will display a 404 page if the
path is not matched.
- d) The app will reload, and the user will be
redirected to the home page.
- Answer: c)