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

Question

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

这是我的商店代码：

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

我找到了一个可行的解决方案。感谢聚光灯铺平了道路。 Flux 被设计为具有单向数据流，而我想做的事情违反了这一点，因为它有两个流。

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

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

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

Answer 2

发生这种情况的原因是由于 ReactJS 的工作原理以及“状态”在组件之外是不可见的。不久前我们遇到了这个问题，经过研究，我们做了以下事情：

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

路由器.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，但在操作/存储中，您将需要您创建的 router.js 文件，以便它可以在组件之外工作。您会在网上找到许多类似的示例，这绝对有效，并且是我们正在使用的东西。让我们知道这对您有何影响。