從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