动态生成 link 的嵌套路由，在 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> 中，组件 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>

的子项

非常感谢任何帮助

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>
                
            ))
        )
}

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

Nested route with dinamically generated link with reach router in Gatsby

javascript

reactjs

hyperlink

gatsby

reach-router