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

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

1 个答案: