Discuss react router?
Routing in React is the process of managing navigation between different components or views within a single-page application (SPA). React uses React Router, a popular library, to handle routing and enable the dynamic rendering of components based on the URL.
- 1
Declarative: Declarative mode enables basic routing features like matching URLs to components, navigating around the app, and providing active states with APIs like <Link>, useNavigate, and useLocation.
- 2
Data: By moving route configuration outside of React rendering, Data Mode adds data loading, actions, pending states and more with APIs like loader, action, and useFetcher.
- 3
Framework: Framework Mode wraps Data Mode with a Vite plugin to add the full React Router experience.
Scenario Questions
0-2 years experience
- 1How would you set up a simple React Router configuration to navigate between a Home page and an About page?
- 2If you add a new <Route> but clicking its <Link> doesn’t change the URL, what could be causing that?
2-5 years experience
- 1We need a protected Dashboard route that only logged‑in users can see. Walk me through how you’d implement that with React Router.
- 2After upgrading to React Router v6, a nested route stopped rendering its child component. How would you debug the problem?
- 3When would you choose client‑side routing versus a server‑side redirect in a React application?
5-8 years experience
- 1Our app has dozens of routes and the bundle size is growing. How would you restructure routing to improve load performance?
- 2Explain how you’d combine React Router with code‑splitting and lazy loading for a feature‑rich app.
- 3We need deep linking into a modal that overlays the current page while preserving back navigation. How would you handle that with React Router?
8+ years experience
- 1Our organization is migrating a large legacy codebase from React Router v5 to v6 across multiple teams. What migration strategy would you propose to minimize risk and keep routing consistent?
- 2Design a routing architecture for a multi‑tenant SaaS platform where each tenant can have custom pages, and the system must support both client‑side navigation and server‑side rendering.
- 3How would you version route APIs to support backward compatibility without breaking existing users?
Follow-up Questions
- What trade‑offs exist between using <Navigate> and programmatic navigation via the useNavigate hook?
- How does React Router handle route matching order, and why does it matter?
- Can you describe a scenario where you’d prefer server‑side redirects over client‑side routing?