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 并有条件地渲染一个带有经过的路由 props 的 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 - 自定义包装器

采用 props 并有条件地为嵌套的 Route 组件渲染一个 Outlet 组件，或者一个 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>