React Router Basics Quiz

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

'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

is similar to but provides functionality to style active links via 'activeClassName' or 'activeStyle' props.
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

allows you to define paths using JavaScript regular expressions to match complex patterns in URLs.
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

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

Available answers

is used to render only the first matched or in its children from top to bottom.