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 React.lazy and Suspense with React Router to load components dynamically. Implement per-route code splitting for better performance and smaller initial bundle size.
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 URLSearchParams or custom hooks with useLocation. Parse and manage query parameters, handle updates, and maintain query parameter state.
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.
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.
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();
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.
Use StaticRouter instead of BrowserRouter for SSR. Handle location context, match routes on server, and manage data loading. Consider hydration and state management.
Implement higher-order components or custom Route components for protection. Handle authentication, authorization, and redirect flows appropriately.
Use React Helmet or similar libraries. Update meta tags per route, handle dynamic content, and manage SEO requirements.
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.
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.
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.
MemoryRouter keeps history in memory (not in URL). Useful for testing and non-browser environments. Maintains routing state without URL changes.
Use useHistory hook or withRouter HOC. Methods include history.push(), history.replace(), and history.goBack(). Consider state preservation and proper navigation flows.
Use React Transition Group with React Router. Implement enter/exit animations, handle route-based transitions, and manage transition states properly.
Use route configuration and current location to generate breadcrumbs. Handle dynamic segments, maintain breadcrumb state, and implement proper navigation.
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.
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.
Implement data loading in route components or through route handlers. Handle loading states, errors, and data dependencies between routes.
