From @jayair on Mon Apr 10 2017 01:08:03 GMT+0000 (UTC)
Link to chapter - http://serverless-stack.com/chapters/create-a-route-that-redirects.html
Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/58
I console.log(rest), and this appears to the props that react-router gives us? Is that right?
We pass childProps to our component, setting a props.childProps object on the component. Then we pass that off to our Applied, Auth, and UnAuth route components as “props={childProps}”. Does this overwrite what would be our actual props for that component otherwise. Say I added a prop called num={1234}, then added props={childProps}, would num now be removed because we overwrite the props?
Lastly, in the Applied, Auth, and UnAuth components, we are rendering a route component. In the export default ({}) declaration:
export default ({ component: C, props: cProps, ...rest }) => {
I’m just trying to fully understand what this part is doing. component: C is setting a new value for our component key, since we can’t explicitly state the component we are passing in, since it can vary, I get that. I am not so sure about what we are doing with props: cProps, …rest, though. I guess this relates back to my previous question with overwriting these. If I console.log(rest), it appears I get the props that React Router provides us. Would those not be available in props already, or again, did we overwrite this, so we have to reference them some other way, and if so, where does …rest come from?
If we can still reference them from inside of props, do we need to destructure props the way we are doing, or is this just for ease of access and use to the cProps properties? Sorry this was so long, I am just trying to get a full understanding here of the pattern.
Yeah totally understandable. It’s probably one of the biggest areas that needs re-factoring in this guide.
So the pattern is really based on the AppliedRoute component from a few chapters ago:
export default ({ component: C, props: cProps, ...rest }) =>
<Route {...rest} render={props => <C {...props} {...cProps} />} />;
You can read more on it here - https://serverless-stack.com/chapters/create-a-route-that-redirects.html.
The AppliedRoute component just renders a react-router Route component. And we want to be able to use the AppliedRoute component just as we would for a Route component. This is why we do the ...rest trick. So that any props that you would normally be set for a Route component, you can set for our AppliedRoute component. This is a common trick for when you want to “extend” an existing React component.
The second problem is that the react-router Route component needs to render the components for our app and we want to set some props for it. To do that we use the props: cProps, ...rest. Here cProps need to be passed to our component and not to the react-router Route component.
Finally, when react-router renders our component, it sends it any props that are related to the router. We can use this to redirect the user or find the current route they are on. We apply these to our component along with cProps from before by doing <C {...props} {...cProps} />.
Hope that makes sense.