Using React Router v6 how can I create a redirect for a nested route?

Question

I have some nested routes:

<Routes>
  <Route path="components" element={<Components />}>
    <Route path="alert" element={<Alerts />} />
    <Route path="button" element={<Buttons />} />
    <Route path="chip" element={<Chips />} />
  </Route>
</Routes>

I have an <Outlet /> setup in <Components> and the nested routes work as expected.

/components/alert
/components/button
/components/chip

If someone visits /components, I would like to redirect them to /components/alert. Previously using v5 I would use a <Redirect to="/components/alert"> component. How can I achieve this using v6?

I tried using the new <Navigate> component with a wildcard path like this:

<Route path="components" element={<Components />}>
  ...
  <Route path="*" element={<Navigate to="alert" replace />} />
</Route>

But this didn't seem to work.

score 2 · Accepted Answer · answered Sep 21 '22 at 14:25

To replace from Components with Alerts you can use an index as

<Routes>
  <Route path="components" element={<Components />}>
    <Route index element={<Alerts />} />
    <Route path="alert" element={<Alerts />} />
    <Route path="button" element={<Buttons />} />
    <Route path="chip" element={<Chips />} />
  </Route>
</Routes>

This would provide the Alerts component when /components is visited.

To redirect from /components to /components/alerts whenever the former is visited you can use Navigate in that index as

<Routes>
  <Route path="components" element={<Components />}>
    <Route index element={<Navigate replace to="/components/alerts" />} />
    <Route path="alert" element={<Alerts />} />
    <Route path="button" element={<Buttons />} />
    <Route path="chip" element={<Chips />} />
  </Route>
</Routes>

This works and I think using `index` is the way to go. I just needed to use `} />` for the redirect, as the `components` part of the path is inherited. Thanks for the help. — Michael Lynch, Sep 21 '22 at 15:01
For me, I am using the latest 6.4.2 and the redirection only works if I remove the element in the parent route like below. `` `} />` — schrodinger's code, Jun 12 '23 at 03:47

score 0 · Answer 2 · answered Sep 21 '22 at 13:53

With the details that you have provided, I can probably only think of one thing: is there any route conflicts? I think the problem with this is probably there.

I have created something similar to your code in Codesandbox and it worked fine for me.

My code as a reference (Codesandbox link may be deleted/dead in the future):

import "./styles.css";
import {
  BrowserRouter,
  Routes,
  Route,
  Outlet,
  Navigate
} from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="components" element={<Components />}>
          <Route path="alert" element={<Another />} />
          <Route path="*" element={<Navigate to="alert" replace />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Components() {
  return (
    <>
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>

      <Outlet />
    </>
  );
}

function Another() {
  return (
    <div>
      <p>Another Alert Component</p>
    </div>
  );
}

Here is the Codesandbox Link. I tried to navigate to /components/123 and it instantly redirects to /components/alert for me. Perhaps the problem is with your configuration and/or the reverse proxy (if you're testing this in production)?

Going to `/components/123` does redirect me to `/components/alert` but I want to redirect `/components` when there is nothing following the path. — Michael Lynch, Sep 21 '22 at 13:59

score 0 · Answer 3 · edited Sep 21 '22 at 15:49

Try this approach.

Codesandbox demo

Navigate in the demo to /components. It will redirect you to /components/alert

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="components" element={<Components />}>
          <Route path="alert" element={<Another />} />
          <Route path="/components" element={<Navigate to="/components/alert" replace />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Using React Router v6 how can I create a redirect for a nested route?

3 Answers3