在路由更改期间响应 Redux 触发操作

Question

我正在使用"react-router"："^4.1.1"，我能够使它在我的项目中成功工作。现在我需要在路由更改时触发并采取行动。我该怎么做？

/索引.js/

render((
    <Provider store={store}>
    <BrowserRouter>
      <div>
        <HeaderContainer />
        <Main />
      </div>
    </BrowserRouter>

    </Provider>),
  document.getElementById('root')
)

/主.js/

class Main extends React.Component {
    render() {
        return (
              <main>
                <Switch>
                  <Route exact path='/' component={Menu}/>
                  <Route path='/subMenu' component={subMenu}/>
                  <Route path='/Dummy' component={Dummy}/>
                </Switch>
              </main>
            );
        }
    }
export default Main;

/

组件/产品.js/

const Product = ({ ImageUrl, price, quantity, Title, ID }) => (
    <div className="grid_item menuCategoryList_item">
      <Link to='/subMenu' data-productid= {ID} data-id="menuOrderModal" className="js-openModalOverlay">
        {<div className="menuCategoryList_photo"><img src={ImageUrl} alt=""/></div>}
      </Link>
    </div>
)

现在，我的化简器捕获了触发的动作，并负责填充数据。发生路由时如何触发操作？

Answer 1

通常有两种方法：

1(内部组件

 import { browserHistory } from 'react-router';
  //Your initialization
  browserHistory.listen( location =>  {
   //Do your stuff here
  });

2(在根组件中

  <Route path="/" onChange={yourHandler} component={AppContainer}>
     <IndexRoute component={StaticContainer}  />
     <Route path="/a" component={ContainerA}  />
     <Route path="/b" component={ContainerB}  />
   </Route>
  function yourHandler(previousRoute, nextRoute) {
     //do your logic here
  }