使用 Params 和 SearchParams 进行 React Router v6 重定向

Question

我目前正在尝试为新项目设置路由。 我试图实现的是，如果用户访问/home/user/settings并且他们没有登录，它会将他们重定向到/login?redirectTo=/home/user/settings 。

或者，如果他们去/home/device/claim?deviceid=123456789并且他们没有登录，他们将被重定向到/login?redirectTo=/home/device/claim?deviceid=123456789 。

我目前正在使用它，但我觉得这不是最好的方法。 我在提出这个想法时遇到的一个问题是我不知道 URL 会有多少级别。

我当前的代码：

          <Route>
            <Route
              path=":path1/:path2/:path3/:path4"
              element={<RedirectAfterAuth />}
            />
            <Route
              path=":path1/:path2/:path3"
              element={<RedirectAfterAuth />}
            />
            <Route path=":path1/:path2" element={<RedirectAfterAuth />} />
            <Route path=":path1" element={<RedirectAfterAuth />} />
            <Route path="*" element={<Navigate to="/login" />} />
            <Route path="login" element={<Login />} />
            <Route path="/" element={<LandingPage />} />
          </Route>

export default function RedirectAfterAuth() {
  let { path1, path2, path3, path4 } = useParams();
  let [searchParams, setSearchParams] = useSearchParams();
  return (
    <Navigate
      to={`/login?redirectTo=${path1}${path2 ? "/" + path2 : ""}${
        path3 ? "/" + path3 : ""
      }${path4 ? "/" + path4 : ""}${searchParams ? "?" + searchParams : ""}`}
    />
  );
}

我想知道是否有一种方法不必放置大量不同的路径并仅通过一个参数/搜索参数来考虑所有可能性。

感谢您的时间

Answer 1

重定向到身份验证路由时，您不需要捕获所有路径段，您可以简单地捕获当前位置对象并将其作为“引荐来源”值转发给登录组件以重定向回来。

创建一个身份验证布局路由组件，该组件将用于保护路由、捕获位置并重定向到身份验证路由。

例子：

import { Navigate, Outlet, useLocation } from 'react-router-dom';

const AuthLayout = () => {
  const location = useLocation(); // <-- current location being accessed
  const { isAuthenticated } = /* auth state from local state/context/redux/etc */

  return isAuthenticated
    ? <Outlet />
    : (
      <Navigate
        to="/login"
        replace                    // <-- redirect
        state={{ from: location }} // <-- forward location
      />
    );
};

export default AuthLayout;

使用身份验证布局路由导入并包装要保护的路由。

例子：

import AuthLayout from '../path/to/AuthLayout';

...

<Router>
  {/* Unprotected routes */}
  <Route path="login" element={<Login />} />
  <Route path="/" element={<LandingPage />} />
  ...
  <Route element={<AuthLayout />}>
    {/* Protected routes */}
    <Route path="/profile" element={<Profile />} />
    ...
  </Route>
</Router>

为了重定向回被访问的原始路由，登录函数访问重定向时转发的pathname和search （以及任何路由状态）。

例子：

import { useLocation, useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();
const location = useLocation();

...

const loginHandler = async e => {
  e.preventDefault();

  try {
    await /* call authentication endpoint/set state/etc */

    // auth success
    const { from } = location.state || {};
    const { pathname, search, state } = from || {};
    navigate(
      (pathname ?? "/") + (search ?? ""),
      {
        replace: true,
        state
      }
    );
  } catch (error) {
  }
};

...