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.