javascript - 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 - 自定义路线
获取 Prop 并有条件地渲染 Route具有通过的路由 Prop 或 Redirect 的组件路由状态保持当前 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 - 自定义包装器
获取 Prop 并有条件地渲染 Outlet嵌套组件 Route要渲染的组件或 Navigate路由状态保持当前 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>