javascript - 有没有办法在 React Router 中使用嵌套路由 ID 作为 prop 参数

Question

所以基本上我有一个画廊项目数组，其中包含类“GalleryItem”对象(包含画廊名称和图像列表及其名称)。

我还有一个名为“Gallery”的组件，它将 GalleryItem 类对象作为 Prop 并进行渲染。

我想做的是使用 .../galleries/:galleryName 导航以在单个页面内呈现特定画廊。

画廊渲染良好，但我需要它与嵌套路由一起工作!

<Switch>
<Route path="/galleries/:name" render={(props) => <Gallery {...props} galleryItem={this.state.galleryItems[:name]} />} />
<Switch>

显然这是行不通的，所以我想问一下它是如何完成的，以及如果我做的完全错了应该知道什么。

Answer 1

Route 组件 passes three props to the consuming component :

• 匹配
• 地点
• 历史

您想use the match prop获取您的画廊名称:

<Switch>
  <Route
    path="/galleries/:name"
    render={props => (
      <Gallery
        {...props}
        galleryItem={this.state.galleryItems[props.match.params.name]}
      />
    )}
  />
<Switch>