Question

我正在使用react-router和Alt构建一个简单的应用程序，并且我在一个带有路由器参数的页面上。我为这个页面建了一个商店，我想在商店里获取当前的路由器参数。

这是我的商店代码：

var alt = require('../alt.jsx'),
    Router = require('react-router'),
    State = Router.State,

    videoActions = require('../actions/videoActions.jsx')

    class videoStore {
        constructor() {
            console.log(State.getParams())
        }
    }

module.exports = alt.createStore(videoStore)

但是，我在控制台中收到此错误：

Uncaught TypeError: Cannot read property 'router' of undefined

我知道我可以使用State mixin从组件本身执行此操作，但我尝试在Store中初始化状态。

有人可以帮忙吗？

由于

Answer 1

发生这种情况的原因是由于ReactJS如何工作的性质以及“状态”在组件外部不可见。我们不久前遇到了这个问题，在研究了这个问题之后，我们做了以下几点：

创建了一个router.js文件，该文件从路由器复制了一些方法。
创建了包含项目实际路线的routes.js。

router.js

var router;

module.exports = {  
    makePath: function(to, params, query) {
    return router.makePath(to, params, query);
    },

    makeHref: function(to, params, query) {
    return router.makeHref(to, params, query);
    },

    transitionTo: function(to, params, query) {
    router.transitionTo(to, params, query);
    },

    replaceWith: function(to, params, query) {
    router.replaceWith(to, params, query);
    },

    goBack: function() {
    router.goBack();
    },

    run: function(render) {
    router.run(render);
    }
};

var routes = require('./routes');
var Router = require('react-router');

router = Router.create({
    routes: routes, 
    location: Router.HistoryLocation
});

routes.js

var React = require('react');
var Router = require('react-router');
var Route = Router.Route;
var DefaultRoute = Router.DefaultRoute;
...
var routes = (
    <Route name="app" path="/admin" handler={APP}>

        <Route name="login" path="/admin/login/" handler={Login} />

        <Route name="home" path="/admin/home" handler={Home} />

    </Route>
);
module.exports = routes;

在您的组件中，您可以像平常一样访问react-router，但在actions / stores中，您需要创建的router.js文件，以便它可以在组件外部工作。网上有很多类似的例子你会发现，这绝对有效，是我们正在使用的东西。让我们知道这对您有何影响。

Answer 2

我找到了一个有效的解决方案。感谢聚光灯铺平了道路。 Flux被设计为具有单向数据流，而我想要做的就是通过两个流来违反这一点。

我最终创建了一个名为setParams的动作（带有路由器参数的有效载荷），并在componentWillMount中调度该动作。然后我将它们存储在组件的状态中（在一个名为routerParams的变量中）。然后我可以随时访问它。（this.state.routerParams.videoId）

我知道应尽可能少地使用状态，但这似乎应该属于组件状态。

如果其他人有更好的解决方案，请告诉我：）

使用Alt和React-Router在Store中获取路由器参数

2 个答案: