Defining routes in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of defining routes in a React application?

Defining routes lets you decide which component to show when the user visits a specific URL. It helps create different pages or views in a single app.

beginner

Which React library is commonly used for defining routes?

React Router is the most popular library to define routes in React apps. It helps manage navigation and URL changes easily.

beginner

What does the <Route> component do in React Router?

The <Route> component tells React Router which component to show when the URL matches a path you specify.

beginner

How do you define a route for the home page '/' in React Router?

You use <Route path='/' element={<Home />} /> inside a <Routes> component to show the Home component at the root URL.

intermediate

Why do we wrap <Route> components inside a <Routes> component?

The <Routes> component groups all routes and ensures only the best matching route is shown. It manages route matching logic.

Which component from React Router wraps all route definitions?

A <Switch>

B <Routes>

C <Route>

D <Router>

wraps all components and manages which one to display.

How do you specify which component to render for a route?

A Using the 'render' prop

B Using the 'component' prop

C Using the 'element' prop

D Using the 'view' prop

In React Router v6+, use the 'element' prop with JSX to specify the component.

What happens if no route matches the current URL?

A A fallback or 'not found' route can be shown

B The first route is shown

C Nothing is rendered

D The app crashes

You can define a fallback route with path='*' to show a 'not found' page.

Which hook lets you navigate programmatically in React Router?

A useNavigate

B useRoute

C useHistory

D useLocation

useNavigate returns a function to change routes in code.

What is the correct way to import routing components in React Router v6?

A import { BrowserRouter, Switch, Route } from 'react-router-dom';

B import { Router, Switch, Route } from 'react-router-dom';

C import { Router, Routes, Route } from 'react-router-dom';

D import { BrowserRouter, Routes, Route } from 'react-router-dom';

React Router v6 uses BrowserRouter, Routes, and Route components.

Explain how to define a route for a 'Profile' page in React Router.

Think about wrapping routes and specifying the path and component.

Describe why we use the component and how it affects route matching.

Consider how React Router decides which page to show.