怎么让route拥有redux的方法

来源：互联网发布：软件工程设计原则编辑：程序博客网时间：2024/05/01 20:07

需求

如何利用route的onEnter钩子来出发redux的dispatch

方法

I just wrapped my routes in a function that returns them.
This allows you to pass the redux store as an argument
Any onEnter/onExit functions are also defined in there so they have access to that store argument and can dispatch() stuff.

route的配置本质上只要是下面这样，然后在放到router里就可以了。

//route.jsexport default(<Route path="/" component={Index}>    <IndexRoute component={Index} />    <Route path="/public" component={PublicArea} /></Route>)//main.jsimport route from './route.js'import {Router} from 'react-router';ReactDom.render(    <Provider store={store}>        <Router history={history}>{router}</Router>    </Provider>,    app);

那么既然只要是像route.js那样的格式就行了，我也可以把route.js写成一个函数，然后用函数来返回<route>这些路由配置就可以了。

//route.jsexport default function(store){    doSth(store){        //doSth by store    }    return (    <Route path="/" component={Index}>        <IndexRoute component={Index} />        <Route path="/public" component={PublicArea} />    </Route>    )}//main.jsReactDom.render(    <Provider store={store}>        <Router history={history}>{router(store)}</Router>    </Provider>,    app);

参考资料:http://stackoverflow.com/questions/33643290/how-do-i-get-a-hold-of-the-store-dispatch-in-react-router-onenter

0 0