Рендеринг компонента с использованием React Router и сбоя Redux

Question

У меня было приложение React, которое начало выходить из-под контроля, поэтому я решил пойти на React-Redux. Все шло хорошо, пока я не наткнулся на странную ошибку. Идет:

TypeError: this is undefined

И это не было бы ничего впечатляющего, если бы оно не было брошено в библиотеку React-Redux. Вот так:

PureComponent
node_modules/react/cjs/react.development.js:412

  409 |  */
  410 | 
  411 | function PureComponent(props, context, updater) {
> 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;

Консоль говорит:

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)

, что не имеет смысла, потому что у меня нет Connect метода, вызываемого в моем RegisterFormUI компоненте. Я понятия не имею, что я испортила. Вот мой интерфейс в виде:

export default ({user = {}}) => {
    return <BrowserRouter>
        <React.Fragment>
            <Navbar className='navbar_all'>
                <Navbar.Header>
                    <Navbar.Brand>
                        <LinkContainer className='navbar_brand' id='home' to='/'>
                            <NavItem>
                                <img alt='ZdajTo' src="assets/images/new_logo.png" style={{height: '30px'}}/>
                            </NavItem>
                        </LinkContainer>
                    </Navbar.Brand>
                </Navbar.Header>
                <Nav className='float_right'>
                    <LinkContainer to='/homepage' style={{textDecoration: 'none'}}>
                        <NavItem>
                            <button style={{
                                backgroundColor: '#F16049',
                                border: '4px solid #F16049',
                                borderRadius: '4px',
                                padding: '10px',
                                marginBottom: '5px',
                                color: '#fff'
                            }}>
                                DLA ROZWIĄZUJĄCYCH
                            </button>
                        </NavItem>
                    </LinkContainer>
                </Nav>
                <Nav className='float_right'>
                    <SharedNavBar user={user.userAcc}/>
                    {renderNavBar(user)}
                </Nav>
            </Navbar>
            <Switch>
                {renderPaths(user) ? renderPaths(user).map(path => path) : null}
                {SharedPaths.map(path => path)}
            </Switch>
        </React.Fragment>
    </BrowserRouter>
};

А мой контейнер такой:

import {connect} from 'react-redux';
import UI from '../../ui/studentRegistrationUI/RegisterFormUI'
import {beginRegistration} from "../../../../actions";

const mapStateToProps = state => ({user: state.user});

const mapDispatchToProps = dispatch => ({
    handleClick() {
        dispatch(
            beginRegistration('student')
        )
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(UI)

Есть идеи, что я испортил?

Answer 1

Возникла проблема с одним из моих дочерних компонентов.В основном я пытался сделать это:

{CheckBox('Regulations', '/assets/regulamin.pdf', 'regulamin')}

И я должен был сделать это:

<CheckBox id={'Regulations'} path={'/assets/regulamin.pdf'} text={'regulamin'}/>

А вот контейнер для дальнейшего использования:

import {connect} from 'react-redux';
import UI from '../../../ui/studentRegistrationUI/components/CheckBoxUI'

const mapStateToProps = (state, props) => ({user: state.user, id: props.id, path: props.path, text: props.text});

export default connect(mapStateToProps)(UI)