const history = useHistory();
history.push('/new-path');
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 would you programmatically navigate with the React Router 'useHistory' hook?
const history = useHistory();
history.push('/new-path');
Select your answer
Question 2/15
What Component is used to programmatically navigate to a different route in a React component?
props.history.push('/home');
Select your answer
Question 3/15
Which prop is used to redirect as soon as a matched route is found with React Router?
<Redirect to="/home" />
Select your answer
Question 4/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 5/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 6/15
What is the returned value from the 'useLocation' hook in React Router?
const location = useLocation();
Select your answer
Question 7/15
What is the purpose of React Router's '' component?
Select your answer
Question 8/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 9/15
What hook would you use to obtain the current URL path in a React Router app?
const location = useLocation();
console.log(location.pathname);
Select your answer
Question 10/15
How can you create a navigation link in React Router?
<Link to="/about">About</Link>
Select your answer
Question 11/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 12/15
In React Router, what is the purpose of the component?
Select your answer
Question 13/15
What does the 'exact' prop do when used with a ?
<Route path="/about" exact component={About} />
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
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
Your Results
You did not answer any questions correctly.
Your Answers
Question 1/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How would you programmatically navigate with the React Router 'useHistory' hook?
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 2/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 3/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
Which prop is used to redirect as soon as a matched route is found with React Router?
<Redirect to="/home" />
Available answers
The component is used within a to navigate programmatically to another route as soon as the current path matches.
Question 4/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 5/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
How do you define a dynamic route in React Router for displaying user profile pages?
<Route path="/profile/:username" component={Profile} />
Available answers
Use a component with the 'path' prop containing ':' prefix (e.g., :username) to specify dynamic segments within the URL.
Question 6/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 7/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What is the purpose of React Router's '<HashRouter>' component?
Available answers
Question 8/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 9/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
What hook would you use to obtain the current URL path in a React Router app?
const location = useLocation();
console.log(location.pathname);
Available answers
In React Router, 'useLocation' is used to get the current 'location' object, and 'pathname' is accessed to obtain the URL path.
Question 10/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 11/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 12/15
😊 Your
answer was correct
🙁 Your
answer was incorrect
In React Router, what is the purpose of the <Router> component?
Available answers
Question 13/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.
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
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.