Javascript 渲染前触发导航

我有。这是使用一个自定义钩子完成的，该钩子使用

useHistory（）

将新路由推送到它。自定义钩子还返回一个空对象。当您不尝试使用此对象中的任何内容时，代码工作正常，应用程序将重定向到About组件

但是当我试图从对象访问一个（不存在的）值时，我得到的

值为null

错误。我不明白为什么代码会这样。重定向不应该在呈现组件的其余部分之前发生吗

从“React”导入React；
导入“/styles.css”；
从“react router dom”导入{Link，BrowserRouter，Route，useHistory}；
导出默认函数App（）{
返回(
关于
常见问题
);
}
函数useRedirect（）{
const history=useHistory（）；
历史。推（“/about”）；
返回{}；
}
函数FAQ（）{
const{value}=useRedirect（）；
返回FAQ{value.name}；
}
函数About（）{
返回大约；
}

为什么在访问

值之前不发生重定向？我如何确保我的应用程序在访问
值之前重定向

为什么在访问值之前不发生重定向？如何
我可以确保我的应用程序在访问值之前重定向吗

重定向确实发生在访问该值之前，但这并不意味着重定向代码下面的其他源代码将不会执行。这就是客户端路由中的情况

function TestComponent() {
  const history = useHistory();
  history.push("/about");
  setTimeout(()=>{
    console.log("foo"); // <-- will get executed regardless
  }, 3000)

  return "";
}

我希望这能消除对SPA重定向的一些潜在误解
这很好！您知道有什么方法可以强制组件在渲染之前执行导航吗？我知道阻止渲染的一种方法是if
shouldComponentUpdate
返回false。阅读但是，在第一次渲染时，我想在推到历史记录后，您可以立即在函数中调用
return
（可以根据某些条件进行选择）——从技术上讲，它仍然是“渲染的”，但您可以只返回（即渲染），例如，一个空字符串，您可能只需要使用重定向来渲染一个场景，这是一个非常好的主意！所以我认为自定义钩子可能不应该用于重定向？我不会说它不应该用于自定义钩子。我想有一个用例可以促进这种类型的解决方案。但是，在这种情况下，
是理想的选择。事实上，在您的代码沙盒上（如果您先排除错误），如果您继续并转到基本路径，然后单击
FAQ
，然后单击browser back按钮，您将注意到您不会被重定向回基本路径-您将被困在
/about
上。如果使用

function TestComponent() {
  window.location.href = "https://example.com";
  setTimeout(()=>{
    console.log("bar"); // <-- will probably not get executed - will depend on your internet speed
  }, 3000)

  return "";
}