Question

我想将props中的ID传递给组件反应我使用react-router-dom 这是我的app.js文件

          <Switch location={this.props.location}>
        <Route exact path="/" component={Home} />
        <Route path="/list" component={List} />
        <Route path='/img/:imgId' component={() => <Img imgId={this.props.params.imgId}/>} />
      </Switch>

当我转到下一个url img / 2时，路由器会向我发送正确的页面，但道具中没有id。当我研究chrome上的react开发人员工具时，我可以看到

<Switch>
 <Route>
  <component>
   <Img>
   </Img>
  </component>
 </Route>
</Switch>

在名为component的组件中，我在props.match.params.imgId中有一些东西但是当我继续使用Img组件时，这里是我的道具： imgId：{空对象}

您知道如何恢复参数中的ID吗？

谢谢：）

Answer 1

您应该这样做：

第一：更改路线声明

<Switch location={this.props.location}>
  <Route exact path="/" component={Home} />
  <Route path="/list" component={List} />
  <Route path='/img/:imgId' component={Img} />
</Switch>

第二：，您应该像在this example

中那样从react-router注入的匹配中访问道具。

const Img = ({ match }) => (
  <div>
    <h3>IMAGE ID: {match.params.imgId}</h3>
  </div>
);

但是，当然，您可以轻松地将该代码改编成自己的代码。

Answer 2

如果要将路由器支持以外的其他支持传递给组件，则可以使用功能回调模式。根据您的情况，您只需渲染Img组件

<Switch location={this.props.location}>
   <Route exact path="/" component={Home} />
   <Route path="/list" component={List} />
   <Route path='/img/:imgId' component={Img} />
</Switch>

并访问imgId组件中的Img，例如this.props.match.params.id。

但是要指出当前代码中的问题，它无法正常运行，因为您正试图将父母匹配的道具传递给Img组件，而您需要传递路线本身的道具，例如

<Switch location={this.props.location}>
    <Route exact path="/" component={Home} />
    <Route path="/list" component={List} />
    <Route path='/img/:imgId' component={(routerProps) => <Img imgId={routerProps.match.params.imgId}/>} />
</Switch>

将id作为props传递给react-router-dom

2 个答案: