08 / 14

Implement Data mode of routing?

Difficulty: 6/10
React Router loaders, actions & mutations, deferred data handling

Routes are configured as the first argument to createBrowserRouter. At a minimum, you need a path and component:

In your main.js file create a router object using the BrowserRouter function
Render the <RouterProvider> in root component
  1. 1

    Put the outlet in app.js <Outlet/>

  2. 2

    Create a Navbar with all the routes

Scenario Questions

0-2 years experience

  1. 1How would you set up a route that fetches a list of users using a loader in React Router v6.4?
  2. 2If the loader throws an error, what UI would you show and how would you configure the route to handle it?
  3. 3You need to pass data from a parent route to a child without using React context—how does data routing let you do that?

2-5 years experience

  1. 1You added a loader to a route but the component receives undefined data. Walk me through how you'd debug the issue.
  2. 2Why might navigating to a route with a pending loader briefly show a blank page, and what would you change to improve the user experience?
  3. 3When submitting a form that updates server state, would you choose an action or a client‑side mutation, and why?

5-8 years experience

  1. 1Design a data‑routing strategy for a dashboard that loads several independent data sources, some of which can be deferred. How do you avoid waterfall loading?
  2. 2Discuss the impact of using defer() for large payloads on SEO and initial paint performance.
  3. 3How would you implement authentication redirects in data mode routing while preserving the original location the user tried to access?

8+ years experience

  1. 1Your team is migrating a large legacy SPA to React Router data routing. What migration plan would you propose to minimize risk and keep multiple teams aligned?
  2. 2Multiple teams share route definitions with loaders that depend on different back‑end services. How would you structure the codebase to keep loaders testable and maintainable?
  3. 3If you need to support both client‑side navigation and server‑side rendering with data routing, what architectural changes are required and what trade‑offs do you anticipate?

Follow-up Questions

  • What would you adjust if the payload size grew tenfold?
  • How do you keep a loader performant under high traffic?
  • Can you describe how you'd test the error handling path?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.