const location = useLocation();
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
What is the returned value from the 'useLocation' hook in React Router?
const location = useLocation();
Select your answer
Question 2/15
How would you programmatically navigate with the React Router 'useHistory' hook?
const history = useHistory();
history.push('/new-path');
Select your answer
Question 3/15
Which component offers a base URL functionality for all nested routes in React Router?
<BrowserRouter basename="/app">
<Route path="/home" component={Home} />
</BrowserRouter>
Select your answer
Question 4/15
Which Hook provides access to route parameters in a functional component using React Router?
const { id } = useParams();
Select your answer
Question 5/15
If you want a styled active link, which component would you use to enable this in React Router?
<NavLink to="/about" activeClassName="active-link">About</NavLink>
Select your answer
Question 6/15
What special prop can you specify in to pass state to a redirected component?
<Redirect to={{ pathname: '/login', state: { fromAuth: true } }} />
Select your answer
Question 7/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 8/15
How would you obtain match information of a route in a component class?
const { match } = this.props;
console.log(match.params.id);
Select your answer
Question 9/15
What does a custom route component accept in React Router components?
function CustomRoute({ component: Component, ...rest }) {
// Implementation
}
Select your answer
Question 10/15
How do you define a route in React Router for a specific path?
<Route path="/about" component={About} />
Select your answer
Question 11/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 12/15
Which of these components would use paths defined using regular expressions?
<Route path="/ca(r|t)" component={Animal} />
Select your answer
Question 13/15
What Component is used to programmatically navigate to a different route in a React component?
props.history.push('/home');
Select your answer
Question 14/15
What is the purpose of React Router's '' component?
Select your answer
Question 15/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
Your Results
You did not answer any questions correctly.
Your Answers
Question 1/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the returned value from the 'useLocation' hook in React Router?
Available answers
'useLocation' returns a location object that contains information about the current URL, including 'pathname', 'search', 'state', and 'hash'.
Question 2/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you programmatically navigate with the React Router 'useHistory' hook?
const history = useHistory();
history.push('/new-path');
Available answers
By calling 'push' on the history object returned from 'useHistory', you can programmatically navigate to a new path in a functional component.
Question 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which component offers a base URL functionality for all nested routes in React Router?
<BrowserRouter basename="/app">
<Route path="/home" component={Home} />
</BrowserRouter>
Available answers
By setting the 'basename' prop in , a base URL path is prefixed to all nested routes, facilitating nested routing structures.
Question 4/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 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
If you want a styled active link, which component would you use to enable this in React Router?
<NavLink to="/about" activeClassName="active-link">About</NavLink>
Available answers
Question 6/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What special prop can you specify in <Redirect> to pass state to a redirected component?
<Redirect to={{ pathname: '/login', state: { fromAuth: true } }} />
Available answers
When using , the 'to' prop can be an object that contains 'pathname' and 'state', which allows the component being redirected to access the passed state.
Question 7/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 8/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you obtain match information of a route in a component class?
const { match } = this.props;
console.log(match.params.id);
Available answers
In class components, React Router passes route information like 'match', 'location', and 'history' as props, allowing access to variables like URL parameters via 'match.params'.
Question 9/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 10/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 11/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 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which of these components would use paths defined using regular expressions?
<Route path="/ca(r|t)" component={Animal} />
Available answers
Question 13/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What Component is used to programmatically navigate to a different route in a React component?
props.history.push('/home');
Available answers
The 'history.push' method is called to programmatically navigate to a different route in the component once you have access to the 'history' object.
Question 14/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the purpose of React Router's '<HashRouter>' component?
Available answers
Question 15/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>