React Router v6 重定向

Question

感谢您抽出时间提前查看此问题。我有使用 v5 的经验，但由于在 v6 中发生了相当大的变化，我对如何在嵌套页面中设置重定向感到很困惑。

比如我的页面结构如下：

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

在我的 /client 路线中，我设置了如下重定向（其中 APP_URL = /client:

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

但是，在我的 /settings 路线中，我想拥有它以便 /settings 重定向到 /settings/profile。在也有重定向的嵌套路由中设置重定向时，它似乎会导致无限循环或重定向到父级中设置的重定向。

App.tsx

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

观看次数

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

设置

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

有人有这方面的经验吗？

Answer 1

我认为带星号的路由应该放在底部，以便为未列出的路由提供备用，让我知道这不能解决您的问题

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

Answer 2

您混淆了绝对路径和相对路径。由于您在 "/settings" 路径上呈现 Settings，因此所有嵌套路由都需要也呈现为子路由。

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

鉴于：

<Route path="/settings/*" element={<Settings />} />

使用相对路径：

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

使用绝对路径：

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

React Router v6 重定向

React Router v6 Redirects

reactjs

react-router

react-router-dom