Last active
March 2, 2023 08:29
-
-
Save rcanepa/b4ce0dff8d85b357504e04b03e69ac66 to your computer and use it in GitHub Desktop.
Private routes with React Router v4
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} /> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have this same confusing. Can anyone help?