Gatsby中使用Reach Router实现嵌套路由及动态生成链接的问题排查

我来帮你拆解下当前遇到的问题，以及对应的修复步骤：

问题1：组件Props解构错误 #

你在PostSelector组件里的参数写法有问题：

const PostSelector =( {category}, props) => {

React组件的所有props都包含在第一个参数对象里，你把props作为第二个参数是拿不到正确的组件属性的，children自然也就无法获取到。

问题2：嵌套路由的子组件被错误放在循环内 #

你把{props.children}写在了category.edges.map()的循环内部，这会导致每生成一个链接就渲染一次Post组件，而且Reach Router的嵌套路由需要一个固定的"出口"来匹配渲染子组件，循环内的位置无法让路由正确识别匹配规则。

修改后的PostSelector代码 #

const PostSelector = ({ category, children }) => {
  return (
    <div>
      {/* 动态生成文章链接列表 */}
      {category.edges.map((post, i) => (
        <div key={i}>
          <ul>
            <Link to="test">{post.node.title}</Link>
          </ul>
        </div>
      ))}
      {/* 嵌套路由的固定出口：Reach Router会在这里渲染匹配到的Post组件 */}
      {children}
    </div>
  )
}

为什么这样改能解决问题？ #

1. 正确解构Props：把category和children一起从第一个参数对象中解构，这样就能拿到父组件传递过来的嵌套路由子组件（也就是Post）。
2. 路由出口位置正确：将{children}移出循环，作为整个组件的固定部分，Reach Router在匹配到/[slug]/works/test路径时，就能正确把Post组件渲染到这个出口位置，而不是被循环重复渲染或无法匹配。

这样修改后，点击动态生成的链接，Post组件应该就能正常显示了。

内容的提问来源于stack exchange，提问作者luigi esposito