How does react-router pass params to other components via props?

Question

Thus far, the extent of my knowledge about how properties are passed from one component to another via parameters is as follows

//start: extent of my knowledge

Answer 1

That is a question about react-router internals.

react-router is a React component itself and it uses props to pass all the routing information to the children components recursively. However, that is an implementation detail of react-router and i understand it can be confusing, so read on for more details.

The routing declaration in your example is:

<Router history={new HashHistory}>
  <Route path="/" component={Main}>
    <Route path = "topics/:id" component={Topic}></Route>
  </Route>
</Router>

So basically, React-Router will go through each of the components in the routing declaration (Main, Topic) and "pass" the following props to each of the components when the component is created using the React.createElement method. Here are all the props passed to each component:

const props = {
   history,
   location,
   params,
   route,
   routeParams,
   routes
}

The props values are computed by different parts of react-router using various mechanisms (e.g. extracting data from the URL string using regex expressions).

The React.createElement method itself allows react-router to create an element and pass the props above. The signature of the method:

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

So basically the call in the internal implementation looks like:

this.createElement(components[key], props)

Which means that react-router used the props defined above to initiate each of the elements (Main, Topic etc.), so that explains how you could access this.props.params in the Topic components itself, it was passed by react-router!