react-router-dom V6 中的重定向

Question

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

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

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

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

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 中做到这一点吗？ 提前致谢

Answer 1

在react-router-dom v6 中渲染路由和处理重定向与 v5 中的完全不同。 自定义路由组件已经一去不复返了，它们被包装组件模式所取代。

v5 - 自定义路线

获取 props 并有条件地渲染一个Route组件，其中路由 props 通过，或者一个Redirect组件，路由 state 保存当前location 。

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 - 自定义包装器

获取 props 并有条件地渲染嵌套Route组件的Outlet组件或Navigate组件，其中路由 state 保存当前location 。

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>