CODEWITHSUNDEEP
javascriptreactjsnavigationreact-routerurl-routing
connected_user
connected_user

Reputation: 936

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

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

So if I am in PhotoDetailsModal and console.log this.props. I notice that my :photoIdentifier parameter exists in two different spots. In this.props.params.photoIdentifier and as this.props.routeParams.photoIdentifier. What is the difference between these two?

Upvotes: 0

Views: 181

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281874

routeParams is a subset of this.props.params that were directly specified in this component's route.

For example, if the route's path is lookbook/:photoIdentifier and the URL is /lookkook/123/photoId/345 then this.props.routeParams will be {photoIdentifier: '123'}, and this.props.params will be {photoIdentifier: '123', photoId: 345}.

I suppose this answers yours question

Upvotes: 1

Related Questions