Skip to content
Permalink
Browse files

Adding a better explanation to the AppliedRoute component

  • Loading branch information...
jayair committed Nov 26, 2017
1 parent fcae700 commit 6be7f67ae12dd4619c842c8b0a86a282ce628fd2
Showing with 10 additions and 2 deletions.
  1. +10 −2 _chapters/add-the-session-to-the-state.md
@@ -55,7 +55,7 @@ const childProps = {
<img class="code-marker" src="/assets/s.png" />With this.

``` coffee
<Routes childProps={childProps} />
<Routes props={childProps} />
```

Currently, our `Routes` component does not do anything with the passed in `childProps`. We need it to apply these props to the child component it is going to render. In this case we need it to apply them to our `Login` component.
@@ -70,7 +70,15 @@ export default ({ component: C, props: cProps, ...rest }) =>
<Route {...rest} render={props => <C {...props} {...cProps} />} />;
```

This simple component creates a `Route` where the child component that it renders contains the passed in props.
This simple component creates a `Route` where the child component that it renders contains the passed in props. Let's take a quick look at how this being done.

- The `Route` component takes a prop called `component` that represents the component that will be rendered when a matching route is found. We want our `childProps` to be sent to this component.

- The `Route` component can also take a `render` method in place of the `component`. This allows us to control what is passed in to our component.

- Based on this we can create a component that returns a `Route` and takes a `component` and `childProps` prop. This allows us to pass in the component we want rendered and the props that we want applied.

- Finally, we take `component` (set as `C`) and `props` (set as `cProps`) and render inside our `Route` using the inline function; `props => <C {...props} {...cProps} />`. Note, the `props` variable in this case is what the Route component passes us. Whereas, the `cProps` is the `childProps` that want to set.

Now to use this component, we are going to include it in the routes where we need to have the `childProps` passed in.

0 comments on commit 6be7f67

Please sign in to comment.
You can’t perform that action at this time.