title: Rendering a component using React Router and Redux crashing
body: <p>I had a React app, which started to get out of hand, so I decided to go for React-Redux. It kind of went well, until I hit a weird error. It goes:</p>
  
  <pre><code>TypeError: this is undefined
  </code></pre>
  
  <p>And this wouldn't be nothing impressive, if it was not thrown in the React-Redux library. Like so:</p>
  
  <pre><code>PureComponent
  node_modules/react/cjs/react.development.js:412
  
    409 |  */
    410 | 
    411 | function PureComponent(props, context, updater) {
  &gt; 412 |   this.props = props;
    413 | ^  this.context = context; // If a component has string refs, we will assign a different object later.
    414 | 
    415 |   this.refs = emptyObject;
  </code></pre>
  
  <p>The console says:</p>
  
  <pre><code>The above error occurred in one of your React components:
      in Unknown (created by Context.Consumer)
      in Connect(Component) (at RegisterFormUI.jsx:32)
      in form (at RegisterFormUI.jsx:21)
      in div (at RegisterFormUI.jsx:18)
      in div (at RegisterFormUI.jsx:15)
      in div (at RegisterFormUI.jsx:14)
      in div (at RegisterFormUI.jsx:13)
      in Unknown (created by Context.Consumer)
      in Connect(Component) (created by Route)
      in Route (at SharedPaths.jsx:18)
      in Switch (at NavigationUI.jsx:98)
      in Router (created by BrowserRouter)
      in BrowserRouter (at NavigationUI.jsx:65)
      in Unknown (created by Context.Consumer)
      in Connect(Component) (at App.js:50)
      in div (at App.js:49)
      in App (at src/index.js:15)
      in Provider (at src/index.js:14)
  </code></pre>
  
  <p>which makes no sense, because I don't have a <code>Connect</code> method called in my <code>RegisterFormUI</code> component. I have no idea what I messed up. Here's my UI of the form:</p>
  
  <pre><code>export default ({user = {}}) =&gt; {
      return &lt;BrowserRouter&gt;
          &lt;React.Fragment&gt;
              &lt;Navbar className='navbar_all'&gt;
                  &lt;Navbar.Header&gt;
                      &lt;Navbar.Brand&gt;
                          &lt;LinkContainer className='navbar_brand' id='home' to='/'&gt;
                              &lt;NavItem&gt;
                                  &lt;img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/&gt;
                              &lt;/NavItem&gt;
                          &lt;/LinkContainer&gt;
                      &lt;/Navbar.Brand&gt;
                  &lt;/Navbar.Header&gt;
                  &lt;Nav className='float_right'&gt;
                      &lt;LinkContainer to='/homepage' style={{textDecoration: 'none'}}&gt;
                          &lt;NavItem&gt;
                              &lt;button style={{
                                  backgroundColor: '#F16049',
                                  border: '4px solid #F16049',
                                  borderRadius: '4px',
                                  padding: '10px',
                                  marginBottom: '5px',
                                  color: '#fff'
                              }}&gt;
                                  DLA ROZWIĄZUJĄCYCH
                              &lt;/button&gt;
                          &lt;/NavItem&gt;
                      &lt;/LinkContainer&gt;
                  &lt;/Nav&gt;
                  &lt;Nav className='float_right'&gt;
                      &lt;SharedNavBar user={user.userAcc}/&gt;
                      {renderNavBar(user)}
                  &lt;/Nav&gt;
              &lt;/Navbar&gt;
              &lt;Switch&gt;
                  {renderPaths(user) ? renderPaths(user).map(path =&gt; path) : null}
                  {SharedPaths.map(path =&gt; path)}
              &lt;/Switch&gt;
          &lt;/React.Fragment&gt;
      &lt;/BrowserRouter&gt;
  };
  </code></pre>
  
  <p>And my container is this:</p>
  
  <pre><code>import {connect} from 'react-redux';
  import UI from '../../ui/studentRegistrationUI/RegisterFormUI'
  import {beginRegistration} from "../../../../actions";
  
  const mapStateToProps = state =&gt; ({user: state.user});
  
  const mapDispatchToProps = dispatch =&gt; ({
      handleClick() {
          dispatch(
              beginRegistration('student')
          )
      }
  });
  export default connect(mapStateToProps, mapDispatchToProps)(UI)
  </code></pre>
  
  <p>Any idea what I messed up?</p>