React Router Basics Quiz

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?
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 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

uses URL hashes to simulate navigation by including a '#' character, making it useful for browsers that don't support history API.
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

is similar to but provides functionality to style active links via 'activeClassName' or 'activeStyle' props.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
In React Router, what is the purpose of the <Router> component?

Available answers

is the context provider component in React Router that manages routing and is extended by other specific router implementations like or .
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.