这个React组件中发生了什么ES6魔法？

Question

I'm following this tutorial https://serverless-stack.com/ and am on https://serverless-stack.com/chapters/create-a-route-that-redirects.html

This introduces an AuthenticatedRoute which checks the value of a prop called isAuthenticated to decide weather or not to render the component or redirect the user to login

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default ({ component: C, props: cProps, ...rest }) =>
  <Route
    {...rest}
    render={props =>
      cProps.isAuthenticated
        ? <C {...props} {...cProps} />
        : <Redirect
            to={`/login?redirect=${props.location.pathname}${props.location
              .search}`}
          />}
  />;

I get what it achieves, but I'm unsure as to how it's doing it.

Can someone explain to me what's going on with the following bits please?

• component: C
• ...rest
• <C {...props} {...cProps} />

Answer 1

The AuthenticatedRoute is a Functional (stateless) component - a function.

1. The component is invoked with the props as the 1st argument, and this line ({ component: C, props: cProps, ...rest }) destructures the props, and assign some of them to variables. The component: C extract the component property from the props object, and assigns it to variable C .

2. The ...rest in ({ component: C, props: cProps, ...rest }) is part of the ECMAScript's Object Rest/Spread Properties proposal , and you need babel's Object rest spread transform for it to work in current browsers. It creates a new object from all the object properties that weren't assigned to variables (the rest).

3. The <C {...props} {...cProps} /> is react's JSX spread attributes , and it converts all the object ( props and cProps ) properties to component attributes (like writing key=value). Props in cProps will override the properties of props because they appear after them.

Answer 2

component: C - In ES6 you can have default initialisation in case the parameter is not passed. Here component will be defaulted to C.

...rest- With ES6 you can spread the element of a data structure. Here rest may have the route path for the render function.

- Each element of cprops and props is passed as attribute to C component. Props in cProps will override the properties of props as they appear after them.

Answer 3

In this case Authenticated Route is that is called High Order Component. Authenticated Route wrap your Route component and conditionally return component: C if user is authenticated or Redirect component.

• component its a simple props of Authenticated Route but its renamed to C in cause that react component must be capitalized.
• props: cProps its a props you want to receive to the component
• props its a Route render props that needs to be applied to the component, which the render method should return
• ...rest its an object which contain any other props, basically refer to the Route
• About { ...someData } you have been answered above in comments

Then you can simply wrap use <AuthenticatedRoute /> and pass props you need according to the information written above