redux 深度链接:当通过React Context引入组件时,React-Router-Dom重定向至“未找到页面”的请求不起作用

ua4mk5z4  于 2022-11-24  发布在  React
关注(0)|答案(1)|浏览(121)

我尝试在一个项目中创建Deeplinking,Redux信息之间存在层次关系,当一个链接被粘贴到一个新浏览器的URL中时,它应该能够从该URL导航到该页面,这部分是可行的。
但是,如果通过Redux找到的层次结构信息(以jobID〉projectID〉engagementID〉clientID开始)与Redux中找到的不匹配,那么它应该重定向到“Not Found”页面。
下面是我需要的Redux信息:

使用Redux信息,我为Deeplinking(handleDeepLinkingURL)创建了这个函数:

如果我获取的Redux信息返回“undefined”(例如在URL中输入了错误的jobId Guid),那么我希望它重定向到“Not Found”页面。
handleDeepLinkingURL函数在 Jmeter 板组件中调用。

它的工作原理应该是,如果我从URL中获取jobId(使用React-router-dom中的useParams),并且Redux中还不存在一个作业(它不存在是因为我们使用了deeplinking -我正在匿名浏览器中测试功能,并且使用了一个在Redux中找不到的伪GUID),那么它应该调用我的DeepLinking函数,并且应该向我返回“Not Found Page”。
相反,它加载的是 Jmeter 板页面,而没有将适当的数据添加到Redux或显示在页面上。

这是App.tsx x1c4d 1x中的路由。它基于此动态路由加载 Jmeter 板,而不是重定向到“未找到”页面。
为什么在上下文中找到并在 Jmeter 板组件中调用的重定向功能不能像预期的那样重定向?而是仍然加载 Jmeter 板而不是重定向?
我记录了条件函数调用,Redux信息确实返回为undefined(并且没有SelectedJob,因为我们正在执行Deeplinking),因此它应该调用handleDeepLinkingURL函数的第一部分,并重定向到“Not Found”页面。
相反,它会根据App. tsx中的动态路由错误地加载 Jmeter 板页面。

vfwfrxfs

vfwfrxfs1#

您不能从这样的函数返回JSX,并期望它们被呈现到DOM以影响任何实际的导航操作(如果它们被作为回调调用的话)。
根据Redirect组件的用法,我假设您正在使用react-router-dom@5,并且可以访问useHistory钩子。该组件应该使用useHistory钩子来访问history对象,并在handleDeepLinkingURL回调中发出命令性重定向。
示例:

const history = useHistory();

...

const handleDeepLinkingURL = (jobId: string) = {
  ... logic ...

  if (/* condition to redirect */) {
    history.replace("/page-not-found"); // <-- imperative redirect
  } else {
    ... batching logic ...
  }
};

如果handleDeepLinkingURL***作为呈现返回的一部分被***调用,并且预期它***确实***返回要呈现的JSX,则它需要实际返回有效的JSX。
示例:

const handleDeepLinkingURL = (jobId: string) = {
  ... logic ...

  if (/* condition to redirect */) {
    return <Redirect to="/page-not-found" />; // <-- declarative redirect
  } else {
    ... batching logic ...

    return null; // <-- still return valid JSX
  }
};

...

if (!isJobSelected && jobId) {
  return handleDeepLinkingURL(jobId); // <-- return result
} else if (!isJobSelected && !jobId) {
  return <Redirect to="/home" />;
}

相关问题