Mastering React Test-Driven Development

Passing React Router props down through your components

In the last example, we passed the pathname prop to RouterButton. Aside from the non-camelCase name, what's different about this prop? Well, it comes from React Router's current page location, which is a prop that we receive from the Router.

Here's the render hierarchy from App, through CustomerSearch and right down to the Link from the previous example. I have highlighted three props that React Router provides us: history, location, and match:

<Router>  <App>    <Switch>      <Route        path="/searchCustomers"        render={({history, location, match}) => { ... }}>        <CustomerSearchRoute history={...} location={...} match={...}>          <CustomerSearch            history={...}            location={...}            match={...}            searchTerm={...}