React Router overview - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is React Router used for in a React application?

React Router helps manage navigation between different pages or views in a React app without reloading the whole page. It makes the app feel faster and smoother.

beginner

What component do you use to define routes in React Router?

You use the <Route> component inside a <Routes> container to define which component shows for a specific URL path.

intermediate

How does React Router keep the UI in sync with the URL?

React Router listens to URL changes and renders the matching components automatically, so the UI always matches the current URL.

beginner

What is the purpose of the <Link> component in React Router?

The <Link> component creates clickable links that change the URL and show new content without reloading the page, unlike a regular HTML <a> tag.

intermediate

What is a nested route in React Router?

A nested route is a route defined inside another route, allowing you to build layouts where parts of the page change while other parts stay the same.

Which React Router component wraps all your routes?

A <Routes>

B <Router>

C <Route>

D <Link>

The component wraps all components to manage which one renders based on the URL.

What does the <Link> component do differently than a normal <a> tag?

A Prevents navigation

B Reloads the page

C Changes URL without page reload

D Only works with external links

changes the URL and updates the UI without reloading the page, enabling smooth navigation.

How do you define a route that shows a component at path '/home'?

A <Routes path='/home' component={Home} />

B <Route path='/home' element={<Home />} />

C <Link to='/home' component={Home} />

D <Route component='/home' element={Home} />

You use with path and element props to define which component shows for a URL.

What happens when the URL changes in a React Router app?

A React Router renders matching components

B Nothing changes

C The page reloads

D The browser crashes

React Router listens to URL changes and renders the components that match the new URL.

What is a benefit of nested routes?

A They make the app slower

B They only work with external URLs

C They prevent navigation

D They allow parts of the page to stay while others change

Nested routes let you build layouts where some parts stay visible while others update based on the route.

Explain how React Router helps build single-page applications.

Think about how websites feel faster when they don't reload the whole page.

Describe the roles of , , and components in React Router.

Consider how these components work together to handle navigation.

Practice

1. What is the main purpose of React Router in a React application?

easy

A. To style React components with CSS

B. To create multiple pages without reloading the browser

C. To manage state across components

D. To fetch data from APIs

Solution

1. Step 1: Understand React Router's role

   React Router helps build apps with multiple pages by changing views without full page reloads.

2. Step 2: Compare with other options

   Styling, state management, and data fetching are handled by other tools, not React Router.

3. Final Answer:

   To create multiple pages without reloading the browser -> Option B

4. Quick Check:

   React Router = multi-page navigation without reload [OK]

Hint: React Router = multi-page navigation without full reload [OK]

Common Mistakes:

• Confusing React Router with CSS or styling tools
• Thinking React Router manages data fetching
• Assuming React Router handles state management

2. Which of the following is the correct way to wrap your app with React Router for browser-based routing?

easy

A. <BrowserRouter>...</BrowserRouter>

B. <Link>...</Link>

C. <Route>...</Route>

D. <Router>...</Router>

Solution

1. Step 1: Identify the main router component

   For browser history routing, React Router uses BrowserRouter to wrap the app.

2. Step 2: Understand other components

   Route defines pages, Link creates navigation links, and Router alone is not a valid component.

3. Final Answer:

   <BrowserRouter>...</BrowserRouter> -> Option A

4. Quick Check:

   BrowserRouter wraps app for browser routing [OK]

Hint: Wrap app with <BrowserRouter> for browser routing [OK]

Common Mistakes:

• Using <Router> instead of <BrowserRouter>
• Confusing <Route> with the router wrapper
• Wrapping app with <Link> which is for navigation

3. Given this React Router setup, what will be rendered when the URL path is /about?

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element=<Home /> />
        <Route path='/about' element=<About /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. The component

B. Nothing renders because of missing default route

C. Both and components

D. The component

Solution

1. Step 1: Match URL path with Route path

   The URL /about matches the route with path='/about', so <About /> renders.

2. Step 2: Understand route exclusivity

   Only the matching route's element renders; <Home /> renders only at /.

3. Final Answer:

   The <About /> component -> Option D

4. Quick Check:

   URL '/about' renders About component [OK]

Hint: URL path matches Route path exactly to render component [OK]

Common Mistakes:

• Thinking both components render simultaneously
• Assuming missing default route breaks rendering
• Confusing '/' path with '/about'

4. Identify the error in this React Router code snippet:

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

function App() {
  return (
    <BrowserRouter>
      <Route path='/' element=<Home /> />
      <Routes>
        <Route path='/about' element=<About /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. <Route> must be inside <Routes>

B. Missing closing tag for <BrowserRouter>

C. The <Route> for '/' should not have an element prop

D. Cannot use <Route> and <Routes> together

Solution

1. Step 1: Check component nesting rules

   In React Router, all <Route> components must be children of <Routes>.

2. Step 2: Identify incorrect placement

   The <Route path='/' ... /> is outside <Routes>, which is invalid.

3. Final Answer:

   <Route> must be inside <Routes> -> Option A

4. Quick Check:

   Routes wrap Route components [OK]

Hint: Always put <Route> inside <Routes> component [OK]

Common Mistakes:

• Placing <Route> outside <Routes>
• Thinking <Route> can be used alone
• Confusing element prop usage

5. You want to create a navigation menu that changes the URL without reloading the page. Which React Router component should you use, and why? Choose the best option.

hard

A. Use <Route> because it defines the navigation links

B. Use <a> tags because they are standard HTML links

C. Use <Link> because it updates the URL and renders the new page without reload

D. Use <BrowserRouter> because it creates the navigation menu

Solution

1. Step 1: Identify component for navigation links

   <Link> is designed to change the URL and render new pages without reloading.

2. Step 2: Compare with other options

   <a> causes full page reload, <Route> defines pages, and <BrowserRouter> wraps the app but does not create links.

3. Final Answer:

   Use <Link> because it updates the URL and renders the new page without reload -> Option C

4. Quick Check:

   Use Link for smooth navigation without reload [OK]

Hint: Use <Link> for navigation to avoid full page reload [OK]

Common Mistakes:

• Using <a> tags causing full reload
• Confusing <Route> with navigation links
• Thinking <BrowserRouter> creates menus