title: How to handle Authentication with react-router?
body: <p>Trying to make certain routes require Authentication. </p>
  
  <p>I have this: </p>
  
  <pre><code>class App extends Component {
    render() {
      const menuClass = `${this.props.contentMenuClass} col-xs-12 col-md-9`;
      return (  
        &lt;BrowserRouter history={browserHistory}&gt;
          &lt;div className="App"&gt;
            &lt;Header properties={this.props} /&gt;
              &lt;div className="container-fluid"&gt;
                &lt;div className="row"&gt;
                  &lt;SideNav /&gt;
                  &lt;div className={menuClass} id="mainContent"&gt;
                    &lt;Switch&gt;
                      {routes.map(prop =&gt;
                          (
                            &lt;Route
                              path={prop.path}
                              component={prop.component}
                              key={prop.id}
                              render={() =&gt; (
                                !AuthenticationService.IsAutheenticated() ? 
                                  &lt;Redirect to="/Login"/&gt;
                                 : 
                                 &lt;Route path={prop.path}
                                 component={prop.component}
                                 key={prop.id}/&gt;
  
                              )}
                            /&gt;
                          ))}
                    &lt;/Switch&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            {/* &lt;Footer /&gt; */}
  
          &lt;/div&gt;
  
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    contentMenuClass: state.menu,
  });
  
  export default connect(mapStateToProps)(App);
  </code></pre>
  
  <p>Note: Yes the auth service works as it should. </p>
  
  <p>For every route I am checking if the user is authenticated, if not then I want to redirect them to the login page, if they are then it will land on the first page with the route of "/". </p>
  
  <p>All I am getting is: </p>
  
  <blockquote>
  <pre><code>react-dom.development.js:14227 The above error occurred in the &lt;Route&gt; component:
      in Route (created by App)
      in Switch (created by App)
      in div (created by App)
      in div (created by App)
      in div (created by App)
      in div (created by App)
      in Router (created by BrowserRouter)
      in BrowserRouter (created by App)
      in App (created by Connect(App))
      in Connect(App)
      in Provider
  </code></pre>
  </blockquote>
  
  <p>Where am I doing this wrong?</p>