Detailed explanation
I handle routing in React with a routing library such as React Router or TanStack Router because React itself does not provide URL-based navigation. The router matches the current URL to a route definition and renders the corresponding components. This gives each screen a shareable address and supports refresh, bookmarks, and browser back/forward navigation. Browser-history routes usually provide cleaner URLs than hash-based routing, but indexability also depends on accessible content, rendering strategy, and crawler support; choosing a router alone does not guarantee SEO.
Under the hood, a browser-history router listens for navigation changes, updates history through browser APIs, matches the pathname, and renders the matched route tree. Router-provided Link components generally intercept ordinary internal clicks to avoid downloading a fresh HTML document, while preserving normal anchor behaviour where appropriate. Nested routes model shared layouts: a dashboard can keep its sidebar mounted while rendering child pages through an outlet. Dynamic segments represent variable resources. In the TanStack Router example, createFileRoute('/courses/$slug') defines a course route, and CoursePage can read the matched slug with Route.useParams(). File-based routing requires the appropriate file structure and tooling configuration.
I organise route-specific work around the matched route: validate search parameters, load required data, and define loading, error, and not-found states. With a data-capable router, loaders can fetch data before the destination renders, rather than depending entirely on component effects. For example, a course loader can use params.slug to request the selected course. Query parameters are useful for shareable filters and pagination. Lazy route loading can reduce the initial JavaScript download, while preloading likely destinations can improve perceived navigation speed.
For protected screens, I check authentication in the router's supported guard or loader mechanism and redirect unauthenticated users when necessary. However, the backend must still enforce authorisation; client-side guards only control navigation and presentation. In deployment, browser-history routes need server fallback handling so directly opening /courses/react serves the application rather than a server 404. In interviews, I explain these trade-offs and cover refresh behaviour, invalid URLs, and access control instead of only showing route syntax.
Key points to remember
- Use React Router or TanStack Router; React does not include routing.
- Model shared layouts with nested routes and resources with dynamic parameters.
- Use router links for internal navigation and search parameters for shareable UI state.
- Handle route data, loading, errors, missing pages, and authentication explicitly.
- Configure server fallback for browser-history URLs and enforce authorisation on the backend.
Common mistakes candidates make
- Using local component state as the only page-navigation mechanism, losing deep links and browser history.
- Assuming clean URLs automatically guarantee SEO or work on direct refresh without deployment configuration.
- Treating a protected frontend route as sufficient security for sensitive backend data.
Likely follow-up questions
When would you use hash-based routing?
Hash-based routing is useful when hosting cannot rewrite application paths to the entry HTML file. The fragment is not sent to the server, but the resulting URLs are less suitable for conventional page indexing.
What is the difference between route parameters and search parameters?
Route parameters identify a matched path resource, such as the slug in /courses/react. Search parameters typically represent optional state such as ?level=beginner&page=2 and should be parsed and validated.
Why use route loaders instead of fetching everything in useEffect?
Loaders connect data fetching to navigation and let the router coordinate pending and error states before rendering the destination. They can also support preloading and reduce component-driven request waterfalls, although caching and revalidation behaviour depend on the router and configuration.
Interview tip: Start with URL-to-component mapping, walk through the course slug example, and finish with data loading, access control, and refresh handling.