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

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

Directly set the 'location' using 'useHistory'.

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

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

setRoute('/home')

history.push('/home')

navigateTo('/home')

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

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.

State as a standalone prop.

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

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

with a wildcard * segment.

with a dynamic=true attribute.

Wrap the route inside a .

Question 6/15

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

const location = useLocation();

Select your answer

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

A configuration object for active routes.

A string with just the current URL.

An array of URLs visited.

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

Only used for testing purposes.

To handle routing with high security measures.

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

The last is executed by default.

An error is thrown.

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

The page stays empty as no component is rendered.

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

useLocation

useParams

useContext

useRoute

Question 10/15

How can you create a navigation link in React Router?

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

Select your answer

Use the component with the 'to' prop.

Use the component without any prop.

Use the component with the 'to' prop.

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

Used for server-side routing only.

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

Only used in older versions of React Router.

To handle only query parameters in routes.

Question 13/15

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

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

Select your answer

Renders all components except the specified one.

Matches any route that includes the specified path.

Ignores the path and renders the component directly.

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

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

location.reload()

useNavigate()

history.push()

window.navigate()

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

with the 'homePath' prop.

additional prop.

foundation prop.

with the 'basename' prop.

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

Restructure the component to manually update the URL.

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

Directly set the 'location' using 'useHistory'.

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

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

setRoute('/home')

history.push('/home')

navigateTo('/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 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

<Link>

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

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.

State as a standalone prop.

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

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

<Route> with a wildcard * segment.

<Route> with a dynamic=true attribute.

Wrap the route inside a <DynamicRouter>.

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

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

A configuration object for active routes.

A string with just the current URL.

An array of URLs visited.

'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

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.

Only used for testing purposes.

To handle routing with high security measures.

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

The last <Route> is executed by default.

An error is thrown.

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

The page stays empty as no component is rendered.

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

useLocation

useParams

useContext

useRoute

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

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

Use the <NavLink> component without any prop.

Use the <Route> 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 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

<Link>

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

Used for server-side routing only.

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

Only used in older versions of React Router.

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

Renders all components except the specified one.

Matches any route that includes the specified path.

Ignores the path and renders the component directly.

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

location.reload()

useNavigate()

history.push()

window.navigate()

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

<BaseRouter> with the 'homePath' prop.

<HashRouter> additional prop.

<HomeBase> foundation prop.

<BrowserRouter> with the 'basename' prop.

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