React Router v6 Redirects

Question

thank you for taking the time to review this question in advance. I have experience with v5 but since changed pretty significantly in v6 I'm quite confused on how to setup a redirect within a nested page.

For example my page structure is as follows:

- /auth
- /client
  - dashboard
  - settings
    - profile
    - password

In my /client route i have a redirect set as follows (where APP_URL = /client :

<Route path="/*" element={<Navigate to={`${APP_URL}/dashboard`} />} />

However, within my /settings route i would like to have it so that /settings redirects to /settings/profile . When setting a redirect within a nested route that also has a redirect it appears to cause an endless loop or redirect to the redirect set within the parent.

App.tsx

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="*" element={<Views />}/>
        </Routes>
      </Router>
    </div>
  );
}

Views

export const Views = () => {
    return (
        <Routes>
            <Route path="*" element={<Navigate to={APP_URL} />} />
            <Route path={`${APP_URL}/*`} element={<AppLayout />} />
        </Routes>
    )
}

AppLayout

export const AppLayout = () => {
    return (
        <Content>
            <AppViews />
        </Content>
    )
}

AppViews

export const AppViews = () => {
    return (
        <Routes>
            <Route
                path="/*"
                element={<Navigate to={`${APP_URL}/dashboard`} />}
            />
            <Route path={`/dashboard`} element={<Dashboard />} />
            <Route path={`/settings/*`} element={<Settings />} />
        </Routes>
    )
}

Settings

const Settings = () => {
    return (
        <>
            <Routes>
                <Route
                    path="/*"
                    element={<Navigate to={`${APP_URL}/settings/profile`} />}
                />
                <Route path={`/profile`} element={<Profile />} />
                <Route path={`/password`} element={<Password />} />
            </Routes>
        </>
    )
}

Does anyone have any experience with this?

Answer 1

I believe route with asterisk should be put at the bottom to be fallback for routes that are not listed, lemme know this doesnt fix your issue

<Routes>
                <Route path={`/profile`} element={<Profile />} />
                <Route path={`/password`} element={<Password />} />
                <Route
                    path="/*"
                    element={<Navigate to={`${APP_URL}/settings/profile`} />}
                />
            </Routes>

Answer 2

You are mixing up absolute paths for relative paths. Since you are rendering Setting on a "/settings" path all the nested routes need to also be rendered as subroutes. The

const Settings = () => {
  return (
    <>
      <Routes>
        <Route path={`profile`} element={<Profile />} />   // "/settings/profile"
        <Route path={`password`} element={<Password />} /> // "/settings/password"
        <Route
          path="*"
          element={<Navigate to="../profile" />}           // "/settings/profile"
        />
      </Routes>
    </>
  )
}