<Route path="/profile/:username" component={Profile} />
React Router Basics Quiz
Want to learn more than this quiz offers you? Have a look at my Frontend web
development courses.
Create an account and save your quiz results
Login and save your results
OR
Question 1/15
How do you define a dynamic route in React Router for displaying user profile pages?
<Route path="/profile/:username" component={Profile} />
Select your answer
Question 2/15
Which Hook provides access to route parameters in a functional component using React Router?
const { id } = useParams();
Select your answer
Question 3/15
How do you define a route in React Router for a specific path?
<Route path="/about" component={About} />
Select your answer
Question 4/15
What is the purpose of React Router's '' component?
Select your answer
Question 5/15
What is the returned value from the 'useLocation' hook in React Router?
const location = useLocation();
Select your answer
Question 6/15
In React Router, what is the purpose of the component?
Select your answer
Question 7/15
Which React Router component should be used to match any route under a common pattern like '/admin/*'?
<Route path="/admin/*" component={AdminDashboard} />
Select your answer
Question 8/15
What does a custom route component accept in React Router components?
function CustomRoute({ component: Component, ...rest }) {
// Implementation
}
Select your answer
Question 9/15
How can you create a navigation link in React Router?
<Link to="/about">About</Link>
Select your answer
Question 10/15
What will happen if no route matches in a collection of routes enclosed within a component?
<Switch>
<Route path="/home" component={Home} />
<Route component={NotFound} />
</Switch>
Select your answer
Question 11/15
What React Router feature allows you to lazy load components?
const About = React.lazy(() => import('./About'));
<Suspense fallback={<div>Loading...</div>}>
<Route path="/about" component={About} />
</Suspense>
Select your answer
Question 12/15
Which component is used to define routes that should only render one at a time (the first matched route)?
<Switch>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
Select your answer
Question 13/15
What component would you use to include query parameters in a route link in React Router?
<Link to="/home?page=2">Go to page 2</Link>
Select your answer
Question 14/15
Which method should be used to redirect to a particular path after some action is performed?
const { push } = useHistory();
push('/redirect-path');
Select your answer
Question 15/15
What does the 'exact' prop do when used with a ?
<Route path="/about" exact component={About} />
Select your answer
Your Results
You did not answer any questions correctly.
Your Answers
Question 1/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you define a dynamic route in React Router for displaying user profile pages?
Available answers
Use a component with the 'path' prop containing ':' prefix (e.g., :username) to specify dynamic segments within the URL.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which Hook provides access to route parameters in a functional component using React Router?
const { id } = useParams();
Available answers
The 'useParams' hook is used in functional components to access the route parameters specified in a route's path by React Router.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you define a route in React Router for a specific path?
<Route path="/about" component={About} />
Available answers
A route in React Router is defined using the component, where you specify the 'path' for the URL and 'component' for the component to render.
Question 4/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the purpose of React Router's '<HashRouter>' component?
Available answers
Question 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the returned value from the 'useLocation' hook in React Router?
const location = useLocation();
Available answers
'useLocation' returns a location object that contains information about the current URL, including 'pathname', 'search', 'state', and 'hash'.
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In React Router, what is the purpose of the <Router> component?
Available answers
Question 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which React Router component should be used to match any route under a common pattern like '/admin/*'?
<Route path="/admin/*" component={AdminDashboard} />
Available answers
React Router allows the use of a '*' (wildcard) in the 'path' prop of to match any route following the specified pattern, managing dynamic child routes.
Question 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does a custom route component accept in React Router components?
function CustomRoute({ component: Component, ...rest }) {
// Implementation
}
Available answers
A custom route component typically accepts a 'component' prop for the component it needs to render and uses the rest operator to collect any additional props.
Question 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How can you create a navigation link in React Router?
<Link to="/about">About</Link>
Available answers
is used in React Router to create navigation links by using the 'to' prop to specify the target path.
Question 10/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What will happen if no route matches in a collection of routes enclosed within a <Switch> component?
<Switch>
<Route path="/home" component={Home} />
<Route component={NotFound} />
</Switch>
Available answers
Within a , the first without a 'path' prop acts as a fallback, equivalent to a 404 page when no other routes match.
Question 11/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What React Router feature allows you to lazy load components?
const About = React.lazy(() => import('./About'));
<Suspense fallback={<div>Loading...</div>}>
<Route path="/about" component={About} />
</Suspense>
Available answers
You can lazy load components in React via 'React.lazy()', which allows components to be dynamically imported, optionally wrapped in React's for fallback display until loading is finished.
Question 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which component is used to define routes that should only render one at a time (the first matched route)?
<Switch>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
Available answers
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What component would you use to include query parameters in a route link in React Router?
<Link to="/home?page=2">Go to page 2</Link>
Available answers
You can include query parameters in the 'to' prop of the component by appending them to the path as a query string.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which method should be used to redirect to a particular path after some action is performed?
const { push } = useHistory();
push('/redirect-path');
Available answers
To redirect programmatically, 'history.push()' is used with the desired path, leveraging the history object available through React Router's hooks or props.
Question 15/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What does the 'exact' prop do when used with a <Route>?
<Route path="/about" exact component={About} />
Available answers
Adding the 'exact' prop to a ensures that it only matches when the URL is exactly the same as the 'path' specified, not just when it starts with it.