14 / 14

What are different ways to redirect in react?

Difficulty: 6/10
react-router, programmatic navigation, client vs server redirect
  1. 1

    useNavigate Hook: This is the recommended way to redirect in modern React Router

  2. 2

    useHistory Hook: The older method using React Router v5’s history object.

  3. 3

    Navigate component: Redirects directly within JSX. Useful for conditional rendering.

  4. 4

    Directly manipulating the object redirects users outside of React Router.

Scenario Questions

0-2 years experience

  1. 1You have a login form that should send the user to the dashboard after a successful submit. How would you implement that redirect using React Router?
  2. 2A button needs to open an external help site in the same tab. What code would you write to perform that navigation?
  3. 3If you place a <Redirect> component inside a conditional render, what happens when the condition toggles?

2-5 years experience

  1. 1After a profile update API call succeeds, we redirect to the dashboard using useEffect with a state flag, but we see an extra render. How would you refactor the navigation?
  2. 2Our codebase mixes react‑router v5 <Redirect> and v6 <Navigate>, causing navigation loops for some users. What could be causing this and how would you fix it?
  3. 3For a logout flow, would you use history.push or history.replace and why?

5-8 years experience

  1. 1We need a reusable redirect mechanism that works across many nested routes and also supports server‑side rendering in Next.js. How would you design it?
  2. 2Programmatic redirects using window.location are causing full page reloads and breaking state persistence. How would you redesign the strategy to stay SPA‑friendly while handling deep links?
  3. 3We plan to migrate from react‑router v5 to v6. What migration plan would you propose for redirects to minimize user impact?

8+ years experience

  1. 1Multiple micro‑frontends in our organization use different routing libraries. How would you architect a unified redirect solution that works across teams without tying them to a specific router?
  2. 2We want to shift from pure client‑side routing to a hybrid model with server‑side redirects for SEO. What architectural considerations and migration steps would you recommend, especially regarding existing redirect implementations?

Follow-up Questions

  • How would you verify that a redirect preserves query parameters?
  • What edge cases arise when redirecting after an async operation?
  • If you needed to keep the current scroll position, which method would you choose?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.