Private routes with React Router v4

routes.js

function PrivateRoute ({component: Component, authenticated, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authenticated === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authenticated={this.state.authenticated} path='/invoices' component={Invoices} />

Hello, I am having some issues with the React Router Dom PrivateRoute. The private route redirects to the login page even when the user is authenticated. I can't figure out the exact thing that I am doing wrong. Please see the routers and the privateRoute code below.

My Route
<Switch>
<Route path="/login" render={(props) => <Login onLogin={this.handleLogin} {...props} />}></Route>
<Route path="/signup" component={Signup}></Route>
<PrivateRoute exact path="/" authenticated={this.state.isAuthenticated} component={Dashboard} handleLogout = {this.handleLogout}></PrivateRoute>
<PrivateRoute exact path="/dashboard" authenticated={this.state.isAuthenticated} component={Dashboard} handleLogout {this.handleLogout}></PrivateRoute>
<PrivateRoute exact path="/members" authenticated={this.state.isAuthenticated} component={MemberList} handleLogout={this.handleLogout}></PrivateRoute>
<PrivateRoute exact path="/members/new" authenticated={this.state.isAuthenticated} component={NewMember} handleLogout={this.handleLogout}></PrivateRoute>
<PrivateRoute exact path="/members/view" authenticated={this.state.isAuthenticated} component={ViewMember} handleLogout={this.handleLogout}></PrivateRoute>
<Route component={NotFound}></Route>
</Switch>

const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (
<Route
{...rest}
render={props =>
authenticated ? (
<Component {...rest} {...props} />
) : (
<Redirect
to={{
pathname: '/login', state: { from: props.location }
}} /> ) } /> );

Hey guys, this question might sound weird but I am really very confused with this, so bear with me.

In the below code,

function PrivateRoute ({component: Component(-------Here we are using "C" but when we are passing the prop we are using "c" and if memory serves when destructuring the right side of the : gets its value assigned to the left side of the colon in the object and also in the bottom when we are typing the component we are also using "C" how and why is this working????---------- ) , authenticated, ...rest}) {
return (
<Route
{...rest}
render={(props) => authenticated === true
? <Component {...props} />(-------------Here we are using again "C"----------------------)
: <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
/>
)
}

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authenticated={this.state.authenticated} path='/invoices' component={Invoices} />  (-------------Here we are using again "c"----------------------)

Are my concepts wrong or is there some magic at play?

I have this same confusing. Can anyone help?

@adil-waqar
@kanlanc

You can rename while destructuring thats what is happening there like so {actualName: newName},
so we receive component and rename it to be Component after desctucturing with {component: Component}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment