javascript - Gatsby 服务器端基于窗口位置使用仅客户端路由渲染页面

Question

我正在开发一个 Gatsby 项目(一个语言学习博客)，并且遇到了由于服务器端渲染而仅在生产版本中发生的问题。

我使用以下方案以编程方式为每篇博客文章生成一个页面:/posts/{帖子名称}。每个帖子还可以有许多子路径，映射到 UI 中打开的选项卡。例如，/posts/important-spanish-verbs/lesson 将打开类(class)选项卡。每个页面都有一个 matchPath 属性 /posts/{post-name}/*，这些被处理为仅客户端路由，通过 reach-router 实现.

使用gatsbydevelop，该应用程序完全按照预期工作。当我访问 /posts/some-post/podcast 时，它成功打开了 podcast 选项卡，我可以看到事件选项卡已正确设置。

问题是，使用 gatsby build && gatsbyserve 时，当我重新加载直接导航到帖子内的特定选项卡的 URL(手动访问整个 URL 或刷新)时， UI 中的事件选项卡未设置正确。

以下代码片段(经过高度简化和浓缩以演示该问题)大致概述了该问题:

function TabbedLayout({ children, basePath }) {
  return (
    <LocationProvider>
      {({ location }) => {
        return (
          <Fragment>
            <ul>
              React.Children.map(children, (child, index) => {
                const isActive = child.props.path === location.pathname
                console.log(`tab ${child.props.path} active? ${isActive}`)
                return <li className={isActive ? 'active' : 'inactive'}>{/* construct a link based on child props */}</li>
              })
            </ul>
            <Router basepath={basePath}>
              {children}
            </Router>
          </Fragment>
        )
      }}
    </LocationProvider>
}

当我在生产构建(使用SSR)中运行使用上面演示的方法的代码时，会发生什么情况，例如当我访问posts/example-post/lesson:

• 通过 Reach 路由器正确呈现内容(即类(class)选项卡的内容已打开)
• 类(class)选项卡的类(class)不活动(错误)
• 在控制台中，我看到 tab/posts/example-post/lesson active? true 打印，即使 CSS 类没有更新!

我已尝试了所有我能想到的方法来尝试更新用户界面。一旦我单击不同的选项卡并且窗口位置发生变化无需刷新，一切都会更新正常并且事件选项卡 UI 按预期工作，但我似乎无法让它根据isActive 变量。

有人知道解决或解决此问题的方法吗？

谢谢!

Answer 1

我已经设法找到了解决该问题的方法，尽管不详细了解问题实际发生的原因有点令人沮丧。

如果我包裹标签 <li> s(在首次加载 SSR 时无法正确显示为事件/非事件)，以检查我们是否在浏览器中，它可以工作:

return typeof window !== 'undefined' && (
  <li className={isActive ? 'active' : 'inactive'}>
    {/* construct a link based on child props */}
  </li>
)