问题描述
我有一个由 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>
的孩子
任何帮助将不胜感激
解决方法
使用:
const PostSelector =( {category,children}) => {
return(
category.edges.map((post,i) => (
<div key={i}>
<ul>
<Link to="test">{post.node.title}</Link>
</ul>
{children}
</div>
))
)
}