List important routing related hooks?
- 1
useRoutes: Hook version of <Routes> that uses objects instead of components. These objects have the same properties as the component props.
- 2
useParams: Returns an object of key/value pairs of the dynamic params from the current URL that were matched by the routes. Child routes inherit all params from their parent routes.
- 3
useSearchParams: Returns a tuple of the current URL's URLSearchParams and a function to update them. Setting the search params causes a navigation.
- 4
useLocation: Returns the current Location. This can be useful if you'd like to perform some side effect whenever it changes.
- 5
useNavigate : Returns a function that lets you navigate programmatically in the browser in response to user interactions or effects.
- 6
useSubmit: The imperative version of <Form> that lets you submit a form from code instead of a user interaction.
Scenario Questions
0-2 years experience
- 1You're adding a button that should take the user to the profile page when clicked. Which React Router hook would you use to perform the navigation programmatically, and how would you implement it?
- 2In a component that displays details based on a URL like /products/:id, how would you retrieve the product ID using a routing hook?
- 3If you need to conditionally render content based on the current pathname, which hook helps you read the current location?
2-5 years experience
- 1You notice that after navigating to a new route, a component still shows stale data because it reads query parameters only on mount. How would you adjust your hook usage to react to changes in the URL?
- 2During a refactor, a colleague replaced <Link> with useNavigate inside a useEffect, and navigation started happening twice. What could cause this, and how would you fix it?
- 3Explain how you would use a hook to match a nested route pattern without rendering a <Route> component, and why that might be useful in a feature‑flag scenario.
5-8 years experience
- 1Our app needs to support deep linking with optional query parameters and preserve scroll position across navigations. Which combination of routing hooks would you employ, and what edge cases would you guard against?
- 2We are migrating from React Router v5 to v6. How would you audit existing code that uses withRouter and replace it with appropriate hooks, ensuring minimal regression?
- 3When implementing a modal that should overlay on top of the current page but also have its own URL, how would you coordinate useLocation, useNavigate, and useOutlet to manage the UI and URL state?
8+ years experience
- 1Across multiple teams, we want a unified navigation strategy that supports both client‑side routing and server‑side rendering. How would you design a wrapper around React Router hooks to abstract differences while keeping performance optimal?
- 2Our legacy codebase mixes class components using context with functional components using routing hooks. Propose a migration path that minimizes disruption and outlines how to expose routing data to both paradigms.
- 3If we need to add analytics that logs every navigation event, including route params and search strings, where would you place the hook usage to capture all transitions without polluting component logic?
Follow-up Questions
- How does useNavigate differ from using a <Link> component?
- What can go wrong if you call a navigation hook inside a render function?
- Can you combine useLocation with useEffect to trigger side effects on route change?