React Redux Feuer Aktion während Routing-Änderung

Question

Ich benutze "Reag-Router": "^ 4.1.1", und ich konnte es erfolgreich in meinem Projekt arbeiten. Jetzt muss ich feuern und Maßnahmen ergreifen, wenn sich das Routing ändert. Wie kann ich es tun?

/index.js/

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


    </Provider>), 

    document.getElementById('root') 
) 

/main.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; 

/Komponente/product.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> 

) 

Jetzt wird eine abgefeuerte Aktion von meinem Reduzierer abgefangen und das sorgt dafür, dass Daten aufgefüllt werden. Wie kann ich beim Routing eine Aktion auslösen?

Answer 1

Im Allgemeinen gibt es 2 Möglichkeiten:

1) Innen Komponente

import { browserHistory } from 'react-router'; 

    //Your initialization 

    browserHistory.listen(location => { 
    //Do your stuff here 
    }); 

2) In Ihrer Stammkomponente

<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 
    }