导航 React 路由器 dom v6 循环问题

Question

我使用 react-router-dom v6。 但是当我想导航时，它会循环。 我只是想如果 url 不是其中一条路线，只需导航到“foo”url。 在 v5 版本中，我可以通过重定向轻松完成。 但是在 v6 中没有重定向，所以我必须使用导航。 但它的制作循环。 我的代码：

const Login = React.lazy(() => import("./login"));
export const AppViews = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Routes>
        <Route path={`${AUTH_PREFIX_PATH}/login`} element={<Login />} />
        <Route
          path="*"
          element={<Navigate to={`${AUTH_PREFIX_PATH}/login`} replace />}
        />
      </Routes>
    </Suspense>
  );
};

export default AppViews;

该代码有什么问题我真的无法弄清楚。 当路径为 /auth/login 时，它不应该基本打开元素登录吗？ 当我这样做时，它会循环。 感谢您的回复！

Answer 1

试试这种方法这行得通

const Login = React.lazy(() => import("./login"));
import {useNavigate} from "react-router-dom";

export const AppViews = () => {
  const navigate = useNavigate();
  
  const Navigator = () =>{
   navigate(`${AUTH_PREFIX_PATH}/login`)
  }

  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Routes>
      <Route path={`${AUTH_PREFIX_PATH}/login`} element={<Login />} />
      <Route
        path="*"
        element={<Navigator/>}
      />
    </Routes>
  </Suspense>
  );
};

export default AppViews;

Answer 2

据我所知，您在绝对链接方面存在问题。 转换为相对链接似乎可以解决循环问题。 任何一种方法都应该有效，但无需深入研究您的配置，这对我有用。

views/index.js - append 通配符*到路径，因此可以匹配和呈现嵌套路由。

export const Views = (props) => {
  const { token } = props;
  return (
    <>
      <Routes>
        <Route path={`${AUTH_PREFIX_PATH}/*`} element={<AuthLayout />} />
        <Route
          path="/*"
          element={
            <RouteInterceptor isAuthenticated={token} element={<AppLayout />} />
          }
        ></Route>
      </Routes>
    </>
  );
};

views/auth-views/index.js - 使用相对路由，即删除AUTH_PREFIX_PATH前缀。

const Login = React.lazy(() => import("./login"));

export const AppViews = () => {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <Routes>
        <Route path={"login"} element={<Login />} />
        <Route path="/*" element={<Navigate to="login" replace />} />
      </Routes>
    </Suspense>
  );
};

来自 github 存储库的分叉代码框