Using the Route render prop in React
Tags: react, javascript
Published: 2019-11-21 14:32:22

---
title: Using the Route render prop in React
published: true
description: How to pass props down to a rendered component via Route
tags: reactjs, javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20191007-pass-props-to-route.jpeg
---

## How to pass props down to a rendered component via Route

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.

```js
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:

```js
<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:

```js
<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 the `Books` component in this way:

```js
<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:

```js
<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`.