title: React router v4 - Authorized routes with HOC
body: <p>I have a problem to prevent unauthorized users from accessing authorized-only routes/components - such as logged in users dashboard</p>
  
  <p>I have the following code:</p>
  
  <pre><code>import React from 'react'
  //other imports
  import {withRouter} from 'react-router'
  
  class User extends React.Component {
    constructor(props) {
      super(props)
      console.log('props', props)
      let user = JSON.parse(localStorage.getItem('userDetails'))
      if(!user || !user.user || props.match.params.steamId !== user.user.steamId) {
        props.history.push('/')
      } else {
        this.props.updateUserState(user)
        this.props.getUser(user.user.steamId)
      }
    }
  
    //render function
  }
  
  //mapStateToProps and mapDispatchToProps
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(User))
  </code></pre>
  
  <p>The router:</p>
  
  <pre><code>render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;Route exact path="/" component={Main}/&gt;
            &lt;Route path="/user/:steamId" component={User}/&gt;
            &lt;Route path="/completelogin" component={CompleteLogin}/&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      )
    }
  </code></pre>
  
  <p>I tried logging to check if the condition is entered and it is, however I get an error from the render function saying it cannot read properties of null.</p>
  
  <p>Is there a way to fix my problem and also a better approach to cater for my requirement? where specific components will be strictly accessible only to authorized users</p>