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

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

Question 4/15

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

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

Select your answer

Matches any route that includes the specified path.

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.

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

with the 'basename' prop.

foundation prop.

with the 'homePath' prop.

additional prop.

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

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

An error is thrown.

The page stays empty as no component is rendered.

The last is executed by default.

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

Redirect directly doesn't allow passing state.

State as a standalone prop.

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

Link the state directly outside of the Redirect.

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

useLocation

useParams

useContext

Question 9/15

What library do you need to use React Router in a React application?

Select your answer

react-router-dom

react-router

react-router-redux

react-router-native

Question 10/15

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

const { id } = useParams();

Select your answer

useParams

useRoute

useLocation

useHistory

Question 11/15

What is the purpose of React Router's '' component?

Select your answer

It is for server-side routing only.

To handle URLs by preceding route paths with a '#' character, useful for older browsers that don't support the HTML5 history API.

To handle routing with high security measures.

Only used for testing purposes.

Question 12/15

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

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

Select your answer

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

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

Directly set the 'location' using 'useHistory'.

Restructure the component to manually update the URL.

Question 13/15

In React Router, what is the purpose of the component?

Select your answer

Used for server-side routing only.

Only used in older versions of React Router.

Serve as the base for all routing, often extended by components like and .

To handle only query parameters in routes.

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

with a dynamic=true attribute.

Wrap the route inside a .

with a wildcard * segment.

with a path prop that includes the colon (:) prefix for dynamic segments.

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

Your Results

You did not answer any questions correctly.

Your Answers

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

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

<Match>

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

<Route>

<Link>

You can include query parameters in the 'to' prop of the component by appending them to the path as a query string.

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

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

Matches any route that includes the specified path.

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.

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

<BrowserRouter> with the 'basename' prop.

<HomeBase> foundation 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 6/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

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

An error is thrown.

The page stays empty as no component is rendered.

The last <Route> is executed by default.

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

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

Redirect directly doesn't allow passing state.

State as a standalone prop.

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

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

useLocation

useParams

useContext

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

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

What library do you need to use React Router in a React application?

Available answers

react-router-dom

react-router

react-router-redux

react-router-native

To use React Router in a web application, you need to install and import the 'react-router-dom' package.

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

useParams

useRoute

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

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of React Router's '<HashRouter>' component?

Available answers

It is for server-side routing only.

To handle URLs by preceding route paths with a '#' character, useful for older browsers that don't support the HTML5 history API.

To handle routing with high security measures.

Only used for testing purposes.

uses URL hashes to simulate navigation by including a '#' character, making it useful for browsers that don't support history API.

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

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

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

Directly set the 'location' using 'useHistory'.

Restructure the component to manually update the URL.

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

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

In React Router, what is the purpose of the <Router> component?

Available answers

Used for server-side routing only.

Only used in older versions of React Router.

Serve as the base for all routing, often extended by components like <BrowserRouter> and <HashRouter>.

To handle only query parameters in routes.

is the context provider component in React Router that manages routing and is extended by other specific router implementations like or .

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

<Route> with a dynamic=true attribute.

Wrap the route inside a <DynamicRouter>.

<Route> with a wildcard * segment.

<Route> with a path prop that includes the colon (:) prefix for dynamic segments.

Use a component with the 'path' prop containing ':' prefix (e.g., :username) to specify dynamic segments within the URL.

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