javascript 使用2个路径导航时的最大深度错误会响应路由器v6和身份验证页面/ Package 器问题

2wnc66cl 于 2023-02-18 发布在 Java

关注(0)|答案(1)|浏览(82)

我使用的是react dom v6路由。
所以我做了一个这样的结构：

<Route element={<AuthenticationRoute/>}>
        <Route path="/login/" element={<LoginPage />} />
        <Route path="/login/:theme" element={<LoginPage />} />
    <Route>

LoginPage有一个表单，但在此之前，应用需要检查用户是否有一些存储空间，如果它已经被重定向，然后它应该呈现LoginPage。
我们需要做大量的重定向，所有的条件都存储在LoginPage中，当它试图加载页面时会引起一些麻烦。所以我需要更改和移动条件/函数。
现在，组件AuthenticationRoute是一个 Package 器，在满足以下条件时进行重定向：一米一米一x一米二米一x
在某个时候，我需要重定向到另一个网站，它会返回到相同的路径(login/...)，哈希值如下：#state=redirect_uri=value&param=value.
此哈希包含所有查询字符串，我需要它们来呈现LoginPage。
这里有一个函数可以更改#state=redirect_uri=value&param=value to ?redirect_uri=value&param=value但我需要重定向到login/{theme}/with search：重定向URI =值&参数=值
我试着去做
x一个一个一个一个x一个一个二个x
但是它给了我一个最大深度错误。我知道我应该返回LoginPage，但是我需要查询字符串才能工作。如果我使用pathName "/"，它会正确呈现，但是我需要/：theme/path来应用主题。1-我应该使用window.location.assign或其他方法吗？2-如果我需要以类似于（userHasStorage、userDidAcceptTheTerms等）的频率进行重定向，我做得正确吗？我应该创建另一个页面或路线吗？
TLDR：
1.我想进入页面：https://url.com/login/purpleTheme/#state=queryparam=1234&redirect_uri=1234
1.组件AuthenticationRoute应使用如下queryparam条件性地重定向到login（outlet）：https://url.com/login/purpleTheme/?queryparam=1234&redirect_uri=1234

JavaScript

来源：https://stackoverflow.com/questions/75478912/max-depth-error-on-navigate-with-2-paths-react-router-v6-and-authentication-page

1条答案

按热度按时间

ccgok5k51#

看起来主要问题是AuthenticationRoute组件无条件地从"/login/*"路径导航到"/login/*"路径，"/login/*"路径重新运行if (state)块并重新呈现Navigate组件。
您需要收集所需的信息，并 * 有条件地 * 发出命令性重定向到"/login/*"路径，并添加适当的queryString参数。

export const AuthenticationRoute: FunctionComponent = () => {
  const navigate = useNavigate();
  const { pathname } = useLocation();

  // Run effect when the route pathname changes
  useEffect(() => {
    const search = changeStateHashToQueryString();
    if (search) {
      navigate({
        pathname: `/login/${getTheme()}`,
        search
      });
    }
  }, [navigate, pathname]);

  return loading ? <Loading /> : <Outlet />;
}

赞(0）回复(0）举报 2023-02-18

我来回答

javascript 使用2个路径导航时的最大深度错误会响应路由器v6和身份验证页面/ Package 器问题

1条答案

相关问题

热门标签

最新问答