я проблема с тем, чтобы предотвратить доступ неавторизованных пользователей к маршрутам / компонентам только авторизованным пользователям, например, к панели пользователя, вошедшей в систему.

У меня есть следующий код:

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))

Маршрутизатор:

render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={Main}/>
          <Route path="/user/:steamId" component={User}/>
          <Route path="/completelogin" component={CompleteLogin}/>
        </div>
      </Router>
    )
  }

Я попытался войти, чтобы проверить, введено ли условие, но я получаю сообщение об ошибке, в котором говорится, что он не может прочитать свойства null.

Есть ли способ исправить мою проблему, а также лучший подход для удовлетворения моих требований? где конкретные компоненты будут строго доступны только авторизованным пользователям