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

Question

i'm using react-redux in my project.

I have some component where i'm dispatch some action and get data from reducer into a component on componentWillMount method here is problem when i change to route componentWillMount method not firing my actions or anything else. for that i need to refresh page.

here is my componentWillMount Method:

 componentWillMount() {

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

and here is my main.js where i import my components and assign routing.

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

where i mistake or what i need to do with it?

and its 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

I think you are using ConnectedRouter from the package react-router-redux, which is now deprecated.

For react-router 4, You need to use withRouter react-router-dom to wrap the component before connecting it like this: withRouter(connect(...)(MyComponent)) You can get also get the match, location, history properties via props once the component is wrapped in withRouter.

For further information on withRouter, you can visit the following link: https://reacttraining.com/react-router/web/api/withRouter