Question

我在我的项目中使用react-redux。

我有一些组件，我在其中调度一些操作，并将数据从reducer获取到 componentWillMount 方法上的组件中，当我更改为路由componentWillMount方法而不触发我的操作或其他操作时，这就是问题。为此，我需要刷新页面。

这是我的 componentWillMount 方法：

 componentWillMount() {

        console.log("d")
        this
            .props
            .getChartData()
        data = this.props.chartData
    }

这是我的 main.js ，我在其中导入组件并分配路由。

import CompA from 'components/CompA'
import CompB from 'components/CompB'



const App = () => (
    <Container fluid>
        <div>
          <main>
            <Switch>
              <Route exact path="/page-a" component={ComponentA} />
              <Route exact path="/page-b" component={ComponentB} />
            </Switch>
          </main>
        </div>
    </Container>      
)

export default App

我在哪里出错或需要怎么做？

及其 index.js：

const target = document.querySelector('#root')

console.log(store.getState())
render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div className="row">
        <App />
      </div>
    </ConnectedRouter>
  </Provider>,
  target
)

Answer 1

如果您使用redux，则应使用mapStateToProps更改组件中的状态

Answer 2

我认为您正在使用来自react-router-redux软件包的ConnectedRouter，现已弃用。

对于react-router 4，在像这样连接组件之前，需要使用withRouter react-router-dom封装组件： withRouter(connect(...)(MyComponent)) 将组件包裹在Router中后，还可以通过props获取匹配，位置，历史记录属性。

有关withRouter的更多信息，您可以访问以下链接：https://reacttraining.com/react-router/web/api/withRouter

更改路线后如何重新安装组件

2 个答案: