具有动态生成链接的嵌套路由与 Gatsby 中的到达路由器

Question

我有一个由 gatsby CreatePage 生成的页面，其中包含我使用reach/router 设置路由器的模板。

为了说明问题，下面有一个简化版的代码。 路由器有两个嵌套路由：

MyTemplate.js

 ...   
    <Router basepath={`/${slug}`}>
      <CategoryBar path= "/"> 
        <PostSelector path= "works" category= {category}>   
          <Post path= "test" category={category}></Post>
        </PostSelector>
      </CategoryBar>
    </Router>

在<PostSelector> 中，组件链接是通过 .map 方法动态生成的。

问题： 看起来 {props.children} 没有通过 dowm；链接已生成并呈现，但单击它们不会呈现<Post> 组件。

这里是<PostSelector>的代码

PostSelector.js

...
const PostSelector =( {category}, props) => { 
        return(   
            category.edges.map((post, i) => (
                <div key={i}>
                    <ul>
                    <Link to="test">{post.node.title}</Link> 
                    </ul>
                {props.children}
                </div>
                
            ))
        )
}

如果我用硬编码链接替换动态生成的链接，它会按预期工作，将<Post> 渲染为<PostSelector> 的子级

任何帮助将不胜感激

Answer 1

用途：

const PostSelector =( {category, children}) => { 
        return(   
            category.edges.map((post, i) => (
                <div key={i}>
                    <ul>
                    <Link to="test">{post.node.title}</Link> 
                    </ul>
                {children}
                </div>
                
            ))
        )
}