在 react-router-dom 中将 id 作为 props 传递

Question

我想将 props 中的 ID 传递给组件 React 我使用 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 不存在于 props 中。当我查看 chrome 上的 React 开发人员工具时，我可以看到

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

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

你知道如何恢复参数中的id吗？

谢谢:)

Answer 1

你应该这样做：

1st: 更改您的路由声明

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

2nd: 你应该像在 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>

并访问 Img 组件中的 imgId，如 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>

在 react-router-dom 中将 id 作为 props 传递

Pass id as props in react-router-dom

javascript

reactjs

react-router-dom