时间戳

首页 > 解决方案 > React：使用 React-router 实现 Redux 时遇到问题

reactjs - React：使用 React-router 实现 Redux 时遇到问题

问题描述

今天我第一次尝试在 react-app 上实现 Redux，因为管理状态/道具一直很混乱，到目前为止，它在 redux 方面非常好，但是当我尝试将我的商店与我的应用程序链接时 +路由器我遇到错误。

根据我放置路由器标签的方式，会出现两件事：

- 不编译（大部分时间是因为我在路由器之外）

-编译，渲染，但是当我尝试导航 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)

所以就是这样，我做错了什么以及我应该如何添加我的存储/路由以便它起作用？

标签： reactjsreact-reduxreact-router

解决方案

看看这个文件。

你需要从使用 React Router 导航的组件中调用来导入withRouter并包装react-router-dom你connect在那里的导出。withRouter

因此，您的代码应类似于：

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

此链接还包含有关其工作原理的更多信息。

推荐阅读