是否有一种方法可以将嵌套路由ID用作React路由器中的Prop参数

Question

因此，基本上我有一系列包含" galleryitem"对象的画廊项目(包含图像名称和图像列表及其名称(。

我还有一个称为"画廊"的组件，该组件将GalleryItem类的对象作为道具并呈现。

我想做的是可以与.../galleries/：GalleryName一起浏览单页内的特定画廊。

画廊变得很好，但是我需要与嵌套路线一起使用！

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

显然这不起作用，所以我问它是如何完成的，如果我做错了什么，该怎么办。

Answer 1

Route组件将三个道具传递给消费组件：

• 匹配
• 位置
• 历史

您想使用match Prop获取画廊名称：

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

Answer 2

Prop Match将包含有关路线的匹配方式的信息。您可以做这样的事情：

<Route
    path="/galleries/:name"
    exact
    render={props => 
      <Gallery {...props} galleryItem={galleryItems(props.match.path.split(':')[1])} />
    }
/>