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

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.

neonwatty · Accepted Answer · 2022-09-21 14:25:07Z

4

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>

answered Sep 21, 2022 at 14:25

neonwatty

3462 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michael Lynch Over a year ago

This works and I think using index is the way to go. I just needed to use <Route index element={<Navigate replace to="alert" />} /> for the redirect, as the components part of the path is inherited. Thanks for the help.

schrodinger's code Over a year ago

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. <Route path="components"> <Route index element={<Navigate replace to="alerts" />} />

Nicholas · Accepted Answer · 2022-09-21 13:53:11Z

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.

Sunderam Dubey · Accepted Answer · 2022-09-21 15:49:57Z

0

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>
  );
}

edited Sep 21, 2022 at 15:49

Sunderam Dubey

8,83312 gold badges25 silver badges43 bronze badges

answered Sep 21, 2022 at 14:20

Reinier68

3,4344 gold badges39 silver badges68 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Related