react-router：URL 参数存在于 this.props 中的两个不同位置？

Question

<Route path="lookbook" component={Photos} onEnter={onPageEnter}>
  <Route path=":photoIdentifier" component={PhotoDetailsModal} onEnter={onPageEnter}>
  </Route>
</Route>

因此，如果我在 PhotoDetailsModal 和 console.log this.props 中。我注意到我的 :photoIdentifier 参数存在于两个不同的位置。在 this.props.params.photoIdentifier 和 this.props.routeParams.photoIdentifier 中。这两者有什么区别？

Answer 1

routeParams 是 this.props.params 的子集，直接在此组件的路由中指定。

例如，如果路由的路径是 lookbook/:photoIdentifier 并且 URL 是 /lookkook/123/photoId/345 那么 this.props.routeParams 将是 {photoIdentifier: '123'}，并且 this.props.params 将是 {photoIdentifier: '123', photoId: 345}.

我想这回答了你的问题

react-router：URL 参数存在于 this.props 中的两个不同位置？

react-router: URL parameters exist in two different places in this.props?

javascript

navigation

url-routing

reactjs

react-router