javascript - React 从 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 参数？我尝试通过 props 读取它，但它不存在。

Answer 1

当使用 component=... 时，您的组件将被传递 route props .

特别是，您需要访问 match对象:

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

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