从URL反应提取参数

Question

我正在使用react-router进行路由。 我已经使用了NavLink和Route组件，如下所示：

 <NavLink className={classes.navLink}
          activeClassName={classes.activeNavLink}
          to={`/brokers/${n.id}`}\> 
....
<Route exact path="/brokers/:id" component={BrokerDetails} />

现在我的问题是-如何使用BrokerDetails组件内部传递的id参数？ 我尝试通过道具阅读它，但是它不存在。

Answer 1

当使用component= ...时，您的组件将被传递给props路线 。

特别是，您将要访问match对象：

const BrokerDetails = ({match}) => <div>{JSON.stringify(match.params)}</div>;

应该向您显示所有参数； match.params.id将是id参数。

Answer 2

如果您尝试访问props.Id则因为它不在该位置而无法使用。

当您尝试通过使用'React-router-dom'传递的URL访问参数时，访问道具的方法是match.params.id