React Router Interview Questions

React Router is a standard routing library for React that enables navigation between views in a React application. It provides components for handling routing declaratively, enabling the creation of single-page applications with multiple views and clean URLs.

BrowserRouter uses HTML5 history API and creates clean URLs (/about), while HashRouter uses URL hash (/#/about). BrowserRouter requires server configuration for direct URL access, while HashRouter works without it but has less clean URLs.

Create a custom Route component that checks authentication status and either renders the protected component or redirects to login. Implement using Route's render prop or a higher-order component pattern.

Switch renders the first Route or Redirect that matches the current location exclusively. It prevents multiple routes from rendering simultaneously and provides exclusive routing.

Use Route path with parameter syntax (:param), access parameters via useParams hook or match.params. Example: <Route path='/user/:id' /> and const { id } = useParams();

Nested routes are routes rendered inside other routes. Implement by nesting Route components or using path composition. Handle proper path matching and component hierarchy.

Use useHistory hook or withRouter HOC. Methods include history.push(), history.replace(), and history.goBack(). Consider state preservation and proper navigation flows.

Use React.lazy and Suspense with React Router to load components dynamically. Implement per-route code splitting for better performance and smaller initial bundle size.

Create a catch-all route at the end of Switch using path='*' or no path prop. Render a 404 component for unmatched routes. Consider user experience and navigation options.

useLocation provides access to the current location object containing pathname, search params, and hash. Useful for accessing query parameters and implementing location-based features.

Use React Transition Group with React Router. Implement enter/exit animations, handle route-based transitions, and manage transition states properly.

exact ensures the path matches exactly the current URL. Without exact, '/users' would match '/users/new'. Use for precise route matching and preventing partial matches.

Use URLSearchParams or custom hooks with useLocation. Parse and manage query parameters, handle updates, and maintain query parameter state.

Use StaticRouter instead of BrowserRouter for SSR. Handle location context, match routes on server, and manage data loading. Consider hydration and state management.

Use route configuration and current location to generate breadcrumbs. Handle dynamic segments, maintain breadcrumb state, and implement proper navigation.

NavLink is a special version of Link that can be styled when it matches the current URL. Useful for navigation menus and indicating active routes.

Implement layout components with nested routes. Handle different layouts per route section, manage common elements, and handle transitions.

useRouteMatch attempts to match the current URL like a Route would. Useful for nested routes and conditional rendering based on route matches.

Implement higher-order components or custom Route components for protection. Handle authentication, authorization, and redirect flows appropriately.

Prompt prevents navigation when certain conditions are met. Used for unsaved form data or pending operations. Implement custom confirmation dialogs.

Implement custom scroll behavior using useEffect. Handle scroll position per route, manage scroll restoration, and implement smooth scrolling.

Route configurations are objects defining route paths, components, and nested routes. Use for centralized route management and dynamic route generation.

Implement React.lazy with prefetching strategies. Handle component preloading, manage loading states, and optimize performance.

MemoryRouter keeps history in memory (not in URL). Useful for testing and non-browser environments. Maintains routing state without URL changes.

Implement data loading in route components or through route handlers. Handle loading states, errors, and data dependencies between routes.

Relative links are paths relative to the current route. Use them for nested navigation and maintaining route hierarchy. Handle proper path resolution.

Use MemoryRouter for testing, mock route matches and history. Test navigation, protected routes, and route parameters. Implement comprehensive test cases.

Implement authentication checks in route components or guards. Handle login flows, session management, and protected route access.

Use React Helmet or similar libraries. Update meta tags per route, handle dynamic content, and manage SEO requirements.