In previous articles we have seen how to use Route
to render different views in our application.
The way Route
works is pretty straightforward: we simply specify a component to render when our browser hits a particular URL.
For example, a route can specify a path of /books
to render a Books
component. Or it can specify a path of /books/treasure-island
that renders the TreasureIsland
component.
Now, let's say we have an App
component that keeps a list of books on its own state.
class App extends React.Component {
state = {
books
}
}
We want App
to display the books using a component called Books
, so we need to pass the books
array down from App
to Books
.
We start by creating a route in App
that looks like this:
<Route path="/books" component={Books} />
This will render the component Books
, but how do we pass the list of books down to the Books
component so books can be displayed on the page?
Well, we can't do it using the syntax we have just seen, but Route gives us another option. The other option is to use the render
prop of Route
, in place of the component
prop.
Using Route
with the render
prop looks like this:
<Route path="/store" render={() => <Books />} />
The render
prop takes a function (an arrow function) that returns a component, in this case the Books
component.
Since the function returns a component, in the function body we can pass props
to this component like we do normally. We just need to make sure the props
object is available to the function body, so we need to pass it in as an argument to the anonymous function passed to render.
So, that's how we solve our original problem. We can pass the books
array to theBooks
component in this way:
<Route
path="/store"
render={(props) => <Books books={this.state.books} />}
/>
Now the Books
component has a prop called books
that holds the list of books from the App
state and can display those books.
Yeah, problem solved! But what about the Route props?
Route props
As it turns out, the Route
component defines its own props.
These props are called history
, match
and location
.
They are used as help in navigating our application and they can be passed down to components as well.
We will look at these props in more detail in future articles, but for now let's see how we can pass these down to our Books
component because it may need them in the future.
We can use the spread
operator to pass down those props in a simple way like so:
<Route
path="/store"
render={(props) => <Books {...props} books={this.state.books} />}
/>
Did you notice the syntax {...props}
inside the Books
component?
That's how we pass all the props set by Route
down to the Books
component. This syntax uses the spread operator as a shortcut to listing all the Route
props manually.
And there you have it, how to pass props down to rendered components via Route
.
I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.
You can receive articles like this in your inbox by subscribing to this newsletter. Just click the button below to sign up for a free subscription.