React Redux在路由更改期間發生火災行動

我正在使用「react-router」：「^ 4.1.1」，並且我能夠使其在我的項目中成功運行。現在我需要在路由更改時觸發並採取行動。我該怎麼做？React Redux在路由更改期間發生火災行動

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

/組件/ 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> 

)

現在，我的reducer發現了一個動作，它負責填充數據。如何在路由發生時觸發一個動作？

來源

2017-05-12 keerti

有沒有更多的你的問題？「如何在......時觸發動作」 – CraigRodrigues

您可以使用Route的'render'或'children'方法而不是'component'。例如： { doSomething（）; return

; }} /> –

你解決了這個問題嗎？ – kurumkan

一般有2種方式：

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 
    }

來源

2017-05-12 19:21:07 kurumkan

謝謝，但「react-router」：「^ 4.1.1」，不支持onChange了 – keerti

React Redux在路由更改期間發生火災行動

回答

相關問題