动态生成 link 的嵌套路由,在 Gatsby 中到达路由器

Nested route with dinamically generated link with reach router in Gatsby

我有一个由 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> 中,组件 link 是通过 .map 方法动态生成的。

问题:好像{props.children}没有传下去; link 已生成并呈现,但单击它们不会呈现 <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>
                
            ))
        )
}

如果我将动态生成的 link 替换为硬编码的 link,它会按预期方式呈现 <Post> 作为 <PostSelector>

的子项

非常感谢任何帮助

使用:

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