在REACT-ROUTER-DOM v6中重定向 [英] Redirect in react-router-dom V6

问题描述

登录后我需要导航回原始请求的URL。

例如，用户输入www.example.com/settings，因为用户未经过身份验证，它将导航到登录页面www.example.com/login。

一旦通过身份验证，它应该会自动导航回www.example.com/settings。

我最初使用react-router-domv5的方法非常简单：

const PrivateRoute = ({ isLoggedIn, component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={(props) =>
        isLoggedIn? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{ pathname: `/login/${props.location.search}`, state: { from: props.location } }}
          />
        )
      }
    />
  );
};


<PrivateRoute exact isLoggedIn={isLoggedIn} path="/settings" component={Settings} />

有人能告诉我在V6中如何做到这一点吗？提前感谢

推荐答案

在react-router-domv6中呈现路径和处理重定向与v5有很大不同。定制布线组件消失了，取而代之的是包装组件模式。

v5-自定义路由

获取道具并有条件地呈现具有经过的路线道具的Route组件或具有当前location的路线状态的Redirect组件。

const CustomRoute = ({ isLoggedIn, ...props }) => {
  const location = useLocation();
  return isLoggedIn? (
    <Route {...props} />
  ) : (
    <Redirect
      to={{
        pathname: `/login/${location.search}`,
        state: { location },
      }}
    />
  );
};

...

<PrivateRoute
  exact
  isLoggedIn={isLoggedIn}
  path="/settings"
  component={Settings}
/>

V6-自定义包装

获取道具并有条件地呈现嵌套的Route组件的Outlet组件，或呈现具有当前location的路由状态的Navigate组件。

const CustomWrapper = ({ isLoggedIn, ...props }) => {
  const location = useLocation();
  return isLoggedIn? (
    <Outlet />
  ) : (
    <Navigate
      to={`/login/${location.search}`}
      replace
      state={{ location }}
    />
  )
};

...

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

这篇关于在REACT-ROUTER-DOM v6中重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！