Loading... Login Loading... Register

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

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/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

Utilizing async/await in the component logic.

Using exact with .

Using 'defer' in the .

React.lazy combined with React's Suspense component.

Question 2/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 3/15

What does the 'exact' prop do when used with a ?

<Route path="/about" exact component={About} />

Select your answer

Ignores the path and renders the component directly.

Renders all components except the specified one.

Only matches the route when the path is exactly as specified.

Matches any route that includes the specified path.

Question 4/15

How would you programmatically navigate with the React Router 'useHistory' hook?

const history = useHistory();
history.push('/new-path');

Select your answer

Restructure the component to manually update the URL.

Use the 'navigate' method from the object returned by 'useHistory'.

Call 'push' on the object returned by 'useHistory'.

Directly set the 'location' using 'useHistory'.

Question 5/15

What is the returned value from the 'useLocation' hook in React Router?

const location = useLocation();

Select your answer

An array of URLs visited.

An object containing 'pathname', 'search', 'state', and 'hash'.

A configuration object for active routes.

A string with just the current URL.

Question 6/15

What Component is used to programmatically navigate to a different route in a React component?

props.history.push('/home');

Select your answer

history.push('/home')

navigateTo('/home')

setRoute('/home')

Question 7/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

foundation prop.

with the 'basename' prop.

with the 'homePath' prop.

additional prop.

Question 8/15

Which prop will you use in React Router to make a active only for exact matches?

<NavLink to="/about" exact>

Select your answer

match

exact

active

strict

Question 9/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

An error is thrown.

The page stays empty as no component is rendered.

The last is executed by default.

The first without a path is matched, often used to display a 'Not Found' page.

Question 10/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

State as a standalone prop.

The 'to' prop as an object includes 'pathname' and 'state' fields.

Redirect directly doesn't allow passing state.

Link the state directly outside of the Redirect.

Question 11/15

How can you pass props to a component rendered by a Route?

<Route path="/item" render={(props) => <Component {...props} customProp="value" />} />

Select your answer

Use the 'component' prop to pass any additional props.

Pass props directly into the component.

Use the 'render' prop with an inline function to pass extra props.

Add them to the 'path' prop of .

Question 12/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

useRoute

useParams

useContext

useLocation

Question 13/15

Which Hook provides access to route parameters in a functional component using React Router?

const { id } = useParams();

Select your answer

useRoute

useParams

useLocation

useHistory

Question 14/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

using a wildcard '*' in the path prop.

Question 15/15

Which of these components would use paths defined using regular expressions?

<Route path="/ca(r|t)" component={Animal} />

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

Utilizing async/await in the component logic.

Using exact with <Route>.

Using 'defer' in the <Route>.

React.lazy combined with React's Suspense component.

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 2/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

<Link>

is similar to but provides functionality to style active links via 'activeClassName' or 'activeStyle' props.

Question 3/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

Ignores the path and renders the component directly.

Renders all components except the specified one.

Only matches the route when the path is exactly as specified.

Matches any route that includes the specified path.

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 4/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

Restructure the component to manually update the URL.

Use the 'navigate' method from the object returned by 'useHistory'.

Call 'push' on the object returned by 'useHistory'.

Directly set the 'location' using 'useHistory'.

By calling 'push' on the history object returned from 'useHistory', you can programmatically navigate to a new path in a functional component.

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

An array of URLs visited.

An object containing 'pathname', 'search', 'state', and 'hash'.

A configuration object for active routes.

A string with just the current URL.

'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

What Component is used to programmatically navigate to a different route in a React component?

props.history.push('/home');

Available answers

history.push('/home')

navigateTo('/home')

setRoute('/home')

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

<HomeBase> foundation prop.

<BrowserRouter> with the 'basename' prop.

<BaseRouter> with the 'homePath' prop.

<HashRouter> additional prop.

By setting the 'basename' prop in , a base URL path is prefixed to all nested routes, facilitating nested routing structures.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which prop will you use in React Router to make a <NavLink> active only for exact matches?

<NavLink to="/about" exact>

Available answers

match

exact

active

strict

The 'exact' prop in a ensures that it will only add the active class if the URL matches exactly what is specified.

Question 9/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

An error is thrown.

The page stays empty as no component is rendered.

The last <Route> is executed by default.

The first <Route> without a path is matched, often used to display a 'Not Found' page.

Within a , the first without a 'path' prop acts as a fallback, equivalent to a 404 page when no other routes match.

Question 10/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

State as a standalone prop.

The 'to' prop as an object includes 'pathname' and 'state' fields.

Redirect directly doesn't allow passing state.

Link the state directly outside of the Redirect.

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 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

How can you pass props to a component rendered by a Route?

<Route path="/item" render={(props) => <Component {...props} customProp="value" />} />

Available answers

Use the 'component' prop to pass any additional props.

Pass props directly into the <Route> component.

Use the 'render' prop with an inline function to pass extra props.

Add them to the 'path' prop of <Route>.

To pass props to a component rendered via the , use the 'render' prop which allows you to return a JSX element with additional props passed in-line.

Question 12/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

useRoute

useParams

useContext

useLocation

In React Router, 'useLocation' is used to get the current 'location' object, and 'pathname' is accessed to obtain the URL path.

Question 13/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

useRoute

useParams

useLocation

useHistory

The 'useParams' hook is used in functional components to access the route parameters specified in a route's path by React Router.

Question 14/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

<Match>

<Route> using a wildcard '*' in the path prop.

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 15/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

<Route>

allows you to define paths using JavaScript regular expressions to match complex patterns in URLs.