PrivateRoute.jsx 1.1KB

12345678910111213141516171819202122232425262728293031
  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. import { connect } from 'react-redux'
  4. import { Route, Redirect, withRouter } from 'react-router-dom'
  5. // component inspired from https://reacttraining.com/react-router/web/example/auth-workflow
  6. // /!\ you shall destruct props.component otherwise you get a warning:
  7. // "You should not use <Route component> and <Route render> in the same route; <Route render> will be ignored
  8. const PrivateRoute = ({ component: Component, ...rest }) => {
  9. if (rest.user.isLoggedIn === undefined) return <div />
  10. else return (
  11. <Route {...rest} render={props => rest.user.isLoggedIn
  12. ? <Component {...props} />
  13. : <Redirect to={{pathname: '/login', state: {from: props.location}}} />
  14. } />
  15. )
  16. }
  17. const mapStateToProps = ({ user }) => ({ user })
  18. export default withRouter(connect(mapStateToProps)(PrivateRoute))
  19. PrivateRoute.PropTypes = {
  20. component: PropTypes.shape({
  21. Component: PropTypes.object.isRequired
  22. }),
  23. user: PropTypes.shape({ // user is get with redux connect
  24. isLoggedIn: PropTypes.bool.isRequired
  25. })
  26. }