React: проблема с реализацией Redux с React-роутером

Question

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

В зависимости от того, как я размещаю метки маршрутизатора, появляются 2 вещи:

- не компилируется (большую часть времени, потому что у меня вне маршрутизатора)

-компиляция, рендеринг, но когда я пытаюсь перемещаться по изменениям URL, но не компонентов, которые должны отображаться.

Я сделал много попыток (много), поэтому я вернулся к тому моменту, когда просто связал магазин.

Ниже мой index.js:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import 'bootstrap/dist/css/bootstrap.css';
   import { BrowserRouter } from 'react-router-dom';

   import { Provider } from 'react-redux'
   import store from './store'

   ReactDOM.render(
     <Provider store={store}>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </Provider>,
     document.getElementById('root')
   );

И мой App.js (короткий, потому что он длинный и грязный):

    import React, { Component } from 'react';
    import { Route, Switch, Link } from 'react-router-dom';
    import { connect } from 'react-redux'

    // Components imports

    import { Provider } from 'react-redux'
    import store from './store'
    import { ensureAuth, login, register, updateInputAuth, logout } from         './actions/authActions'


    class App extends Component {
      //states

      //methods

      render() {
        const { pathname } = window.location
        const { logged, user, loginError, registerError, inputLogin, inputRegister, successMessage } = this.props
        return (
          <>
            <nav className="navbar navbar-expand-lg navbar-light bg-light"         id="navbar">

              // My app navbar basically, usses <Link> tags

            </nav>
            {
              !logged ?
              <>
                <ModalConnect />
                <ModalRegister />
              </>
              : null
            }
            <>
              <Switch>
                <Route exact path='/' component={Root}/>
                <Route path='/ground' render={(props) => <GroundAnalizer {...props} logged={this.state.logged} />} />
                <Route path='/air' component={AirAnalizer} />
                <Route path='/simulateur' render={(props) => <Simulateur         {...props} logged={logged} log={this.connect} reg={this.register}                 onInputChange={this.onInputChange} register={this.state.register} login=        {this.state.login} errors={this.state.errors} errorsLog={this.state.errorsLog}                 confirmMsg={this.state.confirmMsg} />} />
                <Route path='/calculateur-route' component={CalculateurRoute} />
                <Route path='/triangulateur' component={Triangulateur} />
              </Switch>
            </>
          </>
        )
      }
    }

    export default connect((store) => {
      return{
        logged: store.auth.logged,
        user: store.auth.user,
        loginError: store.auth.loginError,
        registerError: store.auth.registerError,
        inputLogin: store.auth.inputLogin,
        inputRegister: store.auth.inputRegister,
        successMessage: store.auth.successMessage,
      }
    })(App)

Так вот, что я делаю не так и как мне добавить свой магазин / маршрутизацию, чтобы он работал?

Answer 1

Взгляните на этот документ .

Вам необходимо импортировать withRouter из react-router-dom и обернуть имеющийся там экспорт connect с вызовом withRouterв компонентах, использующих навигацию по React Router.

Таким образом, ваш код должен выглядеть примерно так:

// Before

export default connect((store) => {
      return{
        logged: store.auth.logged,
        user: store.auth.user,
        loginError: store.auth.loginError,
        registerError: store.auth.registerError,
        inputLogin: store.auth.inputLogin,
        inputRegister: store.auth.inputRegister,
        successMessage: store.auth.successMessage,
      }
    })(App)

// After

import { withRouter } from 'react-router-dom';

export default withRouter(connect((store) => {
      return{
        logged: store.auth.logged,
        user: store.auth.user,
        loginError: store.auth.loginError,
        registerError: store.auth.registerError,
        inputLogin: store.auth.inputLogin,
        inputRegister: store.auth.inputRegister,
        successMessage: store.auth.successMessage,
      }
    })(App))

Эта ссылка также содержит дополнительную информацию о том, как это работает.