React.js如何從功能組件訪問路由器鏈接URL中的參數？

Question

我可以使用以下命令從路由器URL訪問參數：

${this.props.match.params.id} 。

有沒有一種方法可以從功能組件而不是類組件訪問相同的參數？

Answer 1

您可以使用react-router提供的withRouter hoc ：

您可以通過withRouter高階組件訪問歷史對象的屬性和最接近的匹配項。 每當呈現時，withRouter都會將更新的匹配，位置和歷史道具傳遞給包裝的組件。

import { withRouter } from 'react-router';

const Component = props => ...

// now you can access props.history|match|location
const ComponentWithRouteProps = withRouter(Component);