Gatsby - location.state '无法读取 null 的属性'

Question

当我从 /pageA 导航到 /pageB 时，我正在通过 Gatsby 的链接传递一个道具，以在 PageB 上呈现我需要从 PageA 获得的 UI 信息。

如果用户正确完成流程，则应用程序按预期工作。当用户从不同的页面手动跳转到/pageB（即：将url从/home更改为/pageB）时，就会出现问题

我使用的导航库是gatsby-plugin-transition-link，我正在传递documentation 之后的道具，就像这样

<Link
 to={'/pageB'}
 state={{ fromPageA: true }}
>

我最初的想法是，如果 prop 返回 null，然后导航回上一页，因为我们知道它不是来自正确的页面。

useEffect(() => {
 console.log(location.state.fromPageA);
 if (location.state.fromPageA === null) {
  navigate('/pageA')
 }
}, []);

问题是我什至无法检查它，因为如果我 console.log 它为空，它会立即使我的应用程序崩溃并出现错误

无法读取 null 的属性（读取 'fromPageA'）

Answer 1

我认为破坏您当前代码的是console.log 验证，而不是if 语句。这应该有效：

useEffect(() => {
 if (location?.state?.fromPageA === null) {
  navigate('/pageA')
 }
}, []);

如果你不使用可选链，你可以这样做：

useEffect(() => {
 if (location){
   if(location.state){
     if(!location.state.fromPageA){
        navigate('/pageA')
     }
   }
 }
}, []);

假设您在组件构造函数中将location 解构为props。否则，请使用props.location。