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

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 wildcard * segment.

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

Wrap the route inside a .

with a dynamic=true attribute.

Question 2/15

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

const { id } = useParams();

Select your answer

useParams

useHistory

useRoute

useLocation

Question 3/15

How do you define a route in React Router for a specific path?

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

Select your answer

Use the component with 'path' and 'component' props.

Question 4/15

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

Select your answer

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

It is for server-side routing only.

To handle routing with high security measures.

Only used for testing purposes.

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.

A configuration object for active routes.

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

A string with just the current URL.

Question 6/15

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

Select your answer

Only used in older versions of React Router.

To handle only query parameters in routes.

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

Used for server-side routing only.

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

What does a custom route component accept in React Router components?

function CustomRoute({ component: Component, ...rest }) {
  // Implementation
}

Select your answer

It typically accepts a 'component' prop and any additional props using the spread operator (...rest).

It accepts no props by default.

It exclusively accepts lifecycle methods.

It accepts only a single prop, usually a JSX element.

Question 9/15

How can you create a navigation link in React Router?

<Link to="/about">About</Link>

Select your answer

Use the component without any prop.

Use the component with the 'to' prop.

Question 10/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 page stays empty as no component is rendered.

An error is thrown.

The last is executed by default.

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

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

React.lazy combined with React's Suspense component.

Using exact with .

Using 'defer' in the .

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

window.navigate()

useNavigate()

history.push()

location.reload()

Question 15/15

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

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

Select your answer

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

Ignores the path and renders the component directly.

Matches any route that includes the specified path.

Renders all components except the specified one.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/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 wildcard * segment.

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

Wrap the route inside a <DynamicRouter>.

<Route> with a dynamic=true attribute.

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

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

useHistory

useRoute

useLocation

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

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

Use the <Route> component with 'path' and 'component' props.

Use the <Switch> component with 'path' and 'component' props.

Use the <BrowserRouter> component with 'path' and 'component' props.

Use the <Link> component with 'path' and 'component' props.

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

😊 Your answer was correct 🙁 Your answer was incorrect

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

Available answers

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

It is for server-side routing only.

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

A configuration object for active routes.

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

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

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

Available answers

Only used in older versions of React Router.

To handle only query parameters in routes.

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

Used for server-side routing only.

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

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

It typically accepts a 'component' prop and any additional props using the spread operator (...rest).

It accepts no props by default.

It exclusively accepts lifecycle methods.

It accepts only a single prop, usually a JSX element.

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

Use the <NavLink> component without any prop.

Use the <Route> component with the 'to' prop.

Use the <Switch> component with the 'to' prop.

Use the <Link> component with the 'to' prop.

is used in React Router to create navigation links by using the 'to' prop to specify the target path.

Question 10/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 page stays empty as no component is rendered.

An error is thrown.

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

React.lazy combined with React's Suspense component.

Using exact with <Route>.

Using 'defer' in the <Route>.

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

window.navigate()

useNavigate()

history.push()

location.reload()

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

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

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

Available answers

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

Ignores the path and renders the component directly.

Matches any route that includes the specified path.

Renders all components except the specified one.

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.