Question

今天，我正在尝试在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)

就是这样，我在做什么错了，我应该如何添加我的存储/路由以使其正常工作？

Answer 1

看看this document。

您需要从tf.add_to_collection(tf.GraphKeys.UPDATE_OPS, batch_normed.updates)导入withRouter，并在使用React Router导航的组件中调用react-router-dom包装connect导出的内容。

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

withRouter

This link还提供了有关其工作原理的更多信息。

React：使用React-router

1 个答案: