Navigate on React router 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 - 将通配符 * 附加到路径，以便匹配和呈现嵌套路由。

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 存储库中分叉 codesandbox

Navigate on React router dom v6 循环问题

Navigate on React router dom v6 loop problem

reactjs

react-router

react-router-dom