ReactJS React Router Syllabus

React Router syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for React Router in ReactJS, not a summary of it.

1. 1

   Setting Up React Router

   3 topics

   • Installing React Router
   • Basic Routing
   • Nested Routes
2. 2

   Route Parameters

   3 topics

   • Using URL Parameters
   • Query Parameters
   • Programmatically Navigating
3. 3

   Advanced Routing

   3 topics

   • Protected Routes
   • Redirects
   • Custom Route Components

React Router flashcards for ReactJS

24 of 50 cards from the React Router deck — real questions with worked answers.

1. Which npm command installs React Router for a web application?

   npm install react-router-dom (this package re-exports everything from react-router plus DOM-specific components like BrowserRouter and Link).

2. What is the difference between the packages react-router, react-router-dom, and react-router-native?

   react-router holds the core routing logic; react-router-dom adds DOM/web bindings (BrowserRouter, Link, etc.); react-router-native adds bindings for React Native. Web apps install react-router-dom.

3. Which top-level component must wrap your app to enable routing with the HTML5 history API?

   A router component, typically <BrowserRouter> (or in React Router v6.4+, a router created by createBrowserRouter with <RouterProvider>).

4. What is the difference between <BrowserRouter> and <HashRouter>?

   <BrowserRouter> uses the HTML5 History API producing clean URLs like /about; <HashRouter> stores the location in the URL hash (/#/about), useful for static file servers that cannot be configured to handle client-side routes.

5. In React Router v6, which components define a set of routes and an individual route?

   <Routes> wraps the collection, and each <Route path="..." element={<Component/>} /> defines a single route. <Routes> renders only the first best match.

6. In React Router v6, how do you render a component for a route: which prop is used?

   The element prop, which takes a React element (JSX): <Route path="/home" element={<Home />} />. This replaced v5's component and render props.

7. What changed from React Router v5's <Switch> to v6?

   <Switch> was replaced by <Routes>. Unlike <Switch>, <Routes> uses a ranking algorithm to pick the best match rather than the first-declared match, and routes no longer need the exact prop.

8. In React Router v6, are routes matched exactly by default?

   Yes. v6 matches the full path by default, so the exact prop from v5 was removed. A path like /users matches only /users, not /users/5 (unless a nested/child route matches).

9. Which component replaces the HTML anchor tag for client-side navigation without a full page reload?

   <Link to="/path">. It renders an <a> but intercepts clicks to update the history without reloading the page.

10. What is <NavLink> and how does it differ from <Link>?

    <NavLink> is a special <Link> that knows whether it is active. It applies an active state so you can style the current route, e.g. via className={({isActive}) => isActive ? 'active' : ''}.

11. In React Router v6, how does <NavLink> expose its active state for styling?

    Through render-prop callbacks: className, style, and children can each receive an object { isActive, isPending } and return the appropriate value based on isActive.

12. What is a nested route in React Router?

    A route defined as a child of another route, whose path is relative to the parent. The child component renders inside the parent's <Outlet>, letting UI compose hierarchically (e.g. a layout with nested pages).

13. Which component marks where a nested/child route should render inside a parent route element?

    <Outlet />. The matched child route's element is rendered wherever the parent places <Outlet /> in its JSX.

14. How do you write nested routes in JSX in React Router v6?

    Nest <Route> elements: <Route path="dashboard" element={<Dashboard/>}><Route path="stats" element={<Stats/>} /></Route>. The child renders in Dashboard's <Outlet />.

15. What is an index route and how is it declared?

    An index route is the default child rendered at the parent's exact path when no other child matches. It is declared with the index prop instead of path: <Route index element={<Home/>} />.

16. What is a layout route (pathless route)?

    A <Route> with an element and children but no path prop. It does not add a URL segment; it exists to share a layout/UI (via <Outlet/>) among its child routes.

17. How do you define a route that captures a dynamic URL parameter?

    Prefix the segment with a colon: <Route path="/users/:userId" element={<User/>} />. The value matched by :userId becomes a route param named userId.

18. Which hook reads dynamic URL parameters from the current route?

    useParams(). For a path /users/:userId, const { userId } = useParams() returns the matched value as a string.

19. In React Router, are URL params returned by useParams strings or their native types?

    Always strings. A numeric id like /users/42 gives userId === '42'; you must convert it (e.g. Number(userId)) yourself.

20. How do you define an optional or catch-all (splat) segment in a route path?

    A splat/catch-all uses * : <Route path="files/*" element={<Files/>} /> matches files and everything after it; the remainder is available via useParams()['*'].

21. What are query parameters and how do they differ from route (path) params?

    Query parameters follow the ? in a URL (e.g. ?sort=asc&page=2) and carry optional key/value data; route params are named segments embedded in the path (/users/:id). Query params are not part of route matching.

22. Which hook reads and updates query parameters (the query string) in React Router v6?

    useSearchParams(). It returns [searchParams, setSearchParams] where searchParams is a URLSearchParams instance.

23. Given const [searchParams] = useSearchParams(), how do you read the value of ?q=react?

    searchParams.get('q') returns 'react'. It returns null if the parameter is absent. Use getAll('key') for repeated keys.

24. How do you update the query string with setSearchParams from useSearchParams?

    Call setSearchParams with an object or URLSearchParams, e.g. setSearchParams({ page: '2', sort: 'asc' }). This updates the URL query and re-renders with the new params (a navigation, so it adds a history entry unless replace is set).

See more React Router flashcards →

Planning React Router for ReactJS

React Router (ReactJS) FAQ