Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Notes on handling redirects in React Router v6, including a detailed explanation of how this improves on what we used to do in v4/5

Redirects in React Router v6

An important part of "routing" is handling redirects. Redirects usually happen when you want to preserve an old link and send all the traffic bound for that destination to some new URL so you don't end up with broken links.

The way we recommend handling redirects has changed in React Router v6. This document explains why.

Background

In React Router v4/5 (they have the same API, you can read about why we had to bump the major version here) we had a <Redirect> component that you could use to tell the router when to automatically redirect to another URL. You might have used it like this:

import { Switch, Route, Redirect } from "react-router-dom";

function App() {
  return (
    <Switch>
      <Route path="/home">
        <HomePage />
      </Route>
      <Redirect from="/" to="/home" />
    </Switch>
  );
}

In React Router v4/5, when the user lands at the / URL in the app above, they are automatically redirected to /home.

There are two common environments in which React Router usually runs:

  • In the browser
  • On the server using React's node.js API

In the browser a <Redirect> is simply a history.replaceState() on the initial render. The idea is that when the page loads, if you're at the wrong URL, just change it and rerender so you can see the right page. This gets you to the right page, but also has some issues as we'll see later.

On the server you handle redirects by passing an object to <StaticRouter context> when you render. Then, you check context.url and context.status after the render to see if a <Redirect> was rendered somewhere in the tree. This generally works fairly well, except you have to invoke ReactDOMServer.renderToString(...) just to know if you need to redirect, which is less than ideal.

Problems

As mentioned above, there are a few problems with our redirect strategy in React Router v4/5, namely:

  • "Redirecting" in the browser isn't really redirecting. Your server still served up a valid HTML page with a 200 status code at the URL originally requested by the client. If that client was a search engine crawler, it got a valid HTML page and assumes it should index the page. It doesn't know anything about the redirect because the page was served with a 200 OK status code. This hurts your SEO for that page.
  • Invoking ReactDOMServer.renderToString() on the server just to know if you need to redirect or not wastes precious resources and time. Redirects can always be known ahead of time. You shouldn't need to render to know if you need to redirect or not.

So we are rethinking our redirect strategy in React Router v6 to avoid these problems.

Handling Redirects in React Router v6

Our recommendation for redirecting in React Router v6 really doesn't have much to do with React or React Router at all. It is simply this: if you need to redirect, do it on the server before you render any React and send the right status code. That's it.

If you do this, you'll get:

  • better SEO for redirected URLs and
  • faster responses from your web server

To handle the situation above, your server code might look something like this (using the Express API):

import * as React from "react";
import * as ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";

import App from "./App";

function handleExpressRequest(req, res) {
  // Handle redirects *before* you render and save yourself some time.
  // Bonus: Send a HTTP 302 Found status code so crawlers don't index
  // this page!
  if (req.url === "/") {
    return res.redirect("/home");
  }

  // If there aren't any redirects to process, go ahead and render...
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  // ...and send a HTTP 200 OK status code so crawlers index the page.
  res.end(html);
}

This will ensure that both:

  • search engine crawlers can see the redirect and avoid indexing the redirected page and
  • you don't waste any more resources server rendering than you have to

Configuring Static Hosting Providers

Many static hosting providers give you an easy way to configure redirects so you can still get good SEO even on a static site with no server. See the docs on various providers below:

On static hosting providers that don't provide a way to do redirects on the server (e.g. GitHub Pages), you can still improve SEO by serving a page with the the redirect encoded in the page's metadata, like this:

<!doctype html>
<title>Redirecting to https://example.com/home</title>
<meta http-equiv="refresh" content="0; URL=https://example.com/home">
<link rel="canonical" href="https://example.com/home">

The <meta> tag tells the browser where to go, and the <link> tag tells crawlers to use that page as the "canonical" representation for that page, which allows you to consolidate duplicate URLs for Googlebot.

Not Server Rendering

If you aren't server rendering your app you can still redirect on the initial render in the client like this:

import { Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/" element={<Navigate replace to="/home" />} />
    </Routes>
  );
}

In the above example, when someone visits /, they will automatically be redirected to /home, same as before.

Please note however that this won't work when server rendering because the navigation happens in a React.useEffect().

Notes on the <Navigate> API

The new <Navigate> element in v6 works like a declarative version of the useNavigate() hook. It's particularly handy in situations where you need a React element to declare your navigation intent, like <Route element>. It also replaces any uses that you had for a <Redirect> element in v5 outside of a <Switch>.

The <Navigate replace> prop tells the router to use history.replaceState() when updating the URL so the / entry won't end up in the history stack. This means that when someone clicks the back button, they'll end up at the page they were at before they navigated to /.

Get Started Upgrading Today

You can prepare your React Router v5 app for v6 by replacing any <Redirect> elements you may be rendering inside a <Switch> with custom redirect logic in your server's request handler.

Then, you can stop using the <StaticRouter context> API and forget about checking the context object after rendering because you know that all of your redirects have already been taken care of.

If you want to redirect client-side, move your <Redirect> into a <Route render> prop.

// Change this:
<Switch>
  <Redirect from="about" to="about-us" />
</Switch>

// to this:
<Switch>
  <Route path="about" render={() => <Redirect to="about-us" />} />
</Switch>

Normal <Redirect> elements that are not inside a <Switch> are ok to remain. They will become <Navigate> elements in v6.

@cecchi
Copy link

cecchi commented Oct 17, 2021

Thanks for the write-up @mjackson

What is the recommendation for redirects that do require rendering? Take an entity that has been renamed, for example: something like a GitHub repository. If I go to the old repository URL I should be redirected to the new URL, but that requires data fetching to determine. Often in React apps that data fetching is tightly coupled to rendering. Is the recommendation there to still use the v4/v5 pattern, with StaticContext (and Navigate?) on the server side?

@mjackson
Copy link
Author

mjackson commented Oct 18, 2021

What is the recommendation for redirects that do require rendering? Take an entity that has been renamed, for example: something like a GitHub repository. If I go to the old repository URL I should be redirected to the new URL, but that requires data fetching to determine. Often in React apps that data fetching is tightly coupled to rendering. Is the recommendation there to still use the v4/v5 pattern, with StaticContext (and Navigate?) on the server side?

For this specific example our recommendation is to fetch the data ahead of time when server rendering so you know if you need to redirect that ID. You don't need to fetch all the data for the current page, just the portion that you need to know for the redirect.

So for example, if the request URL is https://github.com/ReactTraining/react-router and you need to redirect to https://github.com/remix-run/react-router, we would recommend you at least run a query for the org portion of the URL before rendering anything to know whether or not you need to redirect.

Our low-level matchRoutes API can be useful here so you can still use React Router's matching algorithm server side to know which routes match the URL and get the params so you can run your query.

@brandonruizmora
Copy link

brandonruizmora commented Nov 9, 2021

Thanks for the recommendations and the "Not Server Rendering" solution really help me out!

@kannan007
Copy link

kannan007 commented Nov 19, 2021

@mjackson what if i wanted to user to navigate to my home page automatically, if they try to access some routes by typing manually which are not existed in code, how do i redirect them in v5

<Redirect to="/" />

this single line helped me to achieve this how can i achieve this in v6? can you help me out?

@kannan007
Copy link

kannan007 commented Nov 19, 2021

@mjackson found this below code in documentation stackblitz code its working fine, please confirm this

<Route path="*" element={<Navigate replace to="/" />} />

@hevele-moda
Copy link

hevele-moda commented Nov 24, 2021

We have an app that defines a lot of redirects in React components.
There are a few reasons we do this:

  • Some of our redirects depend on data from an external source, so we have to first fetch that data and then redirect if required. For data fetching, we use Apollo client which makes it really easy to handle loading states, errors, caching, etc.
  • We want these redirects to happen on both server-side and client-side, and we also like to keep them defined in one place.

In order to migrate to react-router v6, we'd have to refactor all these redirects to work without React to get them working on SSR. We would also have to make these work on client-side the same way they work today (do the fetch, show loader while data is being fetched, etc.).
This is a quite big lift but also more importantly, it's harder to keep the redirects defined in one place with this change.

I know we can wait for the backwards-compatibility package, but thinking about long term, are there any suggestions on keeping the redirects defined in one place but still having them work on both SSR and client-side?

@joshu-aa
Copy link

joshu-aa commented Dec 3, 2021

what is the equivalent of <Redirect to={{ pathname: "/otp", state: { type: "2", }, }} /> to Navigate? I cant make this one works on navigate <Navigate to={{ pathname: "/otp", state: { type: "2", }, }} />. I got an error of Uncaught TypeError: Cannot read properties of undefined (reading 'state') when I'm accessing my location.state.

@alibek-gao
Copy link

alibek-gao commented Dec 8, 2021

What should we do with conditional redirects? For example new user need to be redirected to onboarding wizard

@piotrekwitkowski
Copy link

piotrekwitkowski commented Dec 13, 2021

@alibek-gao the way I was doing it in v5 was:

<Switch>
    {!load('visitedGetStartedPage') && <Route exact path='/' render={() => <Redirect to='/start' />} />}
    {!!load('visitedGetStartedPage') && <Route exact path='/' render={() => <HomePage login={login} />} />}
</Switch>

and as far as I understand, it is pretty straightforward to replace the Redirect elements with such setup. However, if there are better ways, I would be really glad to see them!

@ItzaMi
Copy link

ItzaMi commented Dec 14, 2021

Any suggestion on what a person should do if they have / behind a PrivateRoute and don't really have anything on / and want to redirect the user to another route from there? (something like /threats/live).

I can't figure out how I would be able to do that with this setup:

const App = () => {
  return (
    <div className={css.host}>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />

          <Route
            path=""
            element={
              <RequireAuth redirectTo="/login">
                <Home />
              </RequireAuth>
            }
          >
            {routes.map(({ link, component }, index) => {
              return <Route path={link} key={index} element={component} />
            })}
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  )
}

EDIT1: Actually, it gets weirder. I left my issue on https://stackoverflow.com/questions/70350267/creating-routes-inside-a-private-route-with-react-router-v6 and ended up finding a solution for my problem but this doesn't seem to work as intended if I want to redirect to this threats/live on auth because I'm rendering all the other routes inside /... So... I'm not sure how I should actually approach this.
I need the Sidebar rendered inside Home but I don't want to land on / since I won't have anything there

EDIT2: I can do something like

useEffect(() => {
  if (window.location.pathname === '/') {
    navigate('/threats/live')
  }
}, [])

but this seems wrong... Or is it not?

@bhavinkatira123
Copy link

bhavinkatira123 commented Dec 16, 2021

@kannan007 ,your soltuion is working fine as i have implemented it to redirect any unwanted url with default link .

@Gzbox
Copy link

Gzbox commented Dec 28, 2021

thank you so much
this solved my problem

@mvittiglio
Copy link

mvittiglio commented Dec 28, 2021

Hey folks... so as far as I can tell my implementation will have to change (from leveraging the BrowserRouter and redirects) by removing any protected routes in the "tree" (client side) so that the protected endpoint call is sent to the server at which point I will also add to the top of the route handling method (server side) endpoint-access checking before rendering the page out.

app.get('*', (req, res) => {
  
  // BEGIN New redirect handling
  const redirectInfo = requiresRedirect(req)
  if(redirectInfo !== false) {
    return res.redirect(redirectInfo.destination)
  }
  // END

  const stylesSheets = new ServerStyleSheets()
  const theme = createTheme({ ... })

  const context = { url: undefined }
  const markup = ReactDOMServer.renderToString(
    stylesSheets.collect(
      <StaticRouter location={req.url} context={context}>
        <MainRouter />
      </StaticRouter>
    )
  )

  // DEPRECATED REDIRECT
  // if (context.url) {
  //   return res.redirect(303, context.url)
  // }

  res.status(200).send(
    Template({
      markup: markup,
      css: stylesSheets.toString()
    })
  )
})

@lfkid
Copy link

lfkid commented Jan 26, 2022

Thank you so much!!! I'm using React Router v6 and trying to find a way to implement the "Redirect" functionality.

@shivam-214
Copy link

shivam-214 commented Feb 1, 2022

@joshu-aa, you can just use : <Navigate to="/otp", state: { type: "2", } /> instead. It works fine!!

@ZicoRazzi
Copy link

ZicoRazzi commented Mar 24, 2022

Hey guys, could you hel me with refactoring of below code, please? Need to replace Redirect.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export function IsUserRedirect({ user, loggedInPath, children, ...restProps }) {
return (
<Route
{...restProps}
render={() => {
if (!user) {
return children;
}

    if (user) {
      return (
        <Redirect
          to={{
            pathname: loggedInPath,
          }}
        />
      );
    }

    return null;
  }}
/>

);
}

export function ProtectedRoute({ user, children, ...rest }) {
return (
<Route
{...restProps}
render={({ location }) => {
if (user) {
return children;
}

    if (!user) {
      return (
        <Redirect
          to={{
            pathname: 'signin',
            state: { from: location },
          }}
        />
      );
    }

    return null;
  }}
/>

);
}

@ZicoRazzi
Copy link

ZicoRazzi commented Mar 24, 2022

And here are the routes...
import React from 'react';
import Home from './pages/home';
import Browse from './pages/browse';
import Signup from './pages/signup';
import Signin from './pages/signin';
import { IsUserRedirect } from './helpers/routes'
import { Route, Routes } from 'react-router-dom';

function App() {
const user = {}
return (



<Route path='/signin' element={} />
<IsUserRedirect
user={user}
loggedInPath={'/browse'}
path={'/signin'}
>


<Route path='/signup' element={} />
<Route path='/' element={} />
<Route path='/browse' element={} />

  </Routes>
</div>

);
}

export default App;

@MohamedAmal
Copy link

MohamedAmal commented Mar 28, 2022

Hello , I have two components
the first has a path of "/home"
second has a path of "/add" and contains the following

render () {
if (this.state.redirect)
{
return <Navigate to="/" state={'well done'}/>;
}
else
{
return (


// I want to receive here the value of state sent from Navigate in add component it should print here the value 'well done'

)
}
}

The question:
how to receive the value of the state inside <Navigate to="/" state={'well done'}/> given from add component and display it in home component, without using hooks.

Thanks in Advance

@allpro
Copy link

allpro commented Apr 10, 2022

if you need to redirect, do it on the server before you render any React and send the right status code. That's it.
If you do this, you'll get:

  • better SEO for redirected URLs and
  • faster responses from your web server

These comments are relevant only to a small minority of public websites that use server-side-rendering. Even in this scenario, it only describes the FIRST render of an SPA app. While this may be good advice for this very limited use-case, but it seems odd to that such an edge-case is noted as an influence in the design of a widely used SPA tool like RR6.

For the vast majority of developers using RR, the only job of the webserver is to deliver source-code to the browser. The SPA in the client handles all logic, (including navigation logic), and renders all content. For enterprise apps like I build, SEO and "faster response" are irrelevant and nonsensical because it is not public and an identical code-bundle is fetched on app-load regardless of the initial URL.

This comment is only to clarify that client-side redirection is necessary, useful and valid. It is not rare or something to avoid.

I use the <Navigate> component to perform the dozens of redirects we use to supports backwards compatibility with legacy hard-coded links and outdated user bookmarks. Plus we use many dynamic redirects from layout-route paths to a first-child, which differs because the sitemap is dynamic, based on user-rights and user preferences. I had to create a wrapper around <Navigate> with more precise logic to fix some infinite loops when redirecting to nested children, but RR6 provides the tools needed to make it work. The upgrade from RR5 to RR6 has required a lot of time and effort, but is worth it. Thank you for all your great work.

@jaylin-slate
Copy link

jaylin-slate commented May 1, 2022

Is there anyway we can redirect to other domain?

@robinelvin
Copy link

robinelvin commented May 12, 2022

Is there anyway we can redirect to other domain?

I would like to know if this is possible too. So far I have had to resort to writing my own <Redirect /> component which detects if the URL is internal or external. If internal it uses navigate(...) and if external it calls window.open(...)
Now I am about to start the SSR side of things I have to add more logic to detect this situation and perform the redirect in a different way as window.open won't work.
It would be nice if this was built into RR6 as my way seems a bit clunky.

@CoderAWei
Copy link

CoderAWei commented May 18, 2022

Is there any solution that we can redirect the nested routes?
for example:

const routes = [
     {
    path: 'nested-routes',
    element: <NestedRoutes/>,
    children: [
      {
        path: 'nested1',
        element: <Nested1/>
      },
      {
        path: 'nested2',
        element: <Nested2/>
      },
    ]
  },
]

when I visit localhost:3000/nested-routes, actually, I want to visit localhost:3000/nested-routes/nested1.How can I achieve this problem.
Thanks

@shrekuu
Copy link

shrekuu commented May 30, 2022

What should we do with conditional redirects? For example new user need to be redirected to onboarding wizard

I have something similar.

import { Navigate, RouteObject, useRoutes } from 'react-router-dom'
import Index from '@/pages/Index'
import Products from '@/pages/Products'
import { IAppStore, useAppStore } from './store'

export default function Routes() {
  const stores = useAppStore((state: IAppStore) => state.stores)
  const activeStoreId = stores.find(e => e.active)?.id

  const routes: RouteObject[] = [
    // Here, if activeStoreId exists, redirect to Products Page.
    { path: '/', element: activeStoreId ? <Navigate to={`${activeStoreId}/products`} /> : <Index /> },
    { path: '/:storeId/products', element: <Products /> },
  ]

  return useRoutes(routes)
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment