使用带有 Flux 的 React Router 以编程方式重定向

Question

我目前正在开发一个使用 NodeJS、Express、Flux 和 React 以及用于客户端路由的 React Router 的项目。

我可能对流程应该如何工作有错误的想法，但我目前正在尝试在成功登录后将用户重定向到主屏幕。不幸的是，我为 React Router 找到的很多示例都是针对 1.0 之前版本的，现在已经无关紧要，或者是在我目前没有编写的 ES6 中，所以我一直在尝试遵循示例并尽我所能将它们联系在一起.

我的代码如下-

//    main.js
var React = require('react/addons');
var Components = require('./components');
var Flux = require('./flux');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var RouterStore = require('./flux/stores/RouterStore.js');
var routes = require('./routes.js');


var AppRouter = React.render(<Router>{routes}</Router>, document.getElementById('render-target'));
RouterStore.setRouter(AppRouter);

/

// routes.js
"use strict";

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;

var routes = (
    <Router>
<Route path="/" component={require('./components/pageComponents/HomePage.jsx')} />
<Route path="item(/:id)" component={require('./flux/viewComponents/Item_ViewComponent.jsx')} />
<Route path="login" component={require('./flux/viewComponents/Login_ViewComponent.jsx')} />
</Router>
)

module.exports = routes;

此时，在遵循示例并从此处的来源收集信息后

我认为我应该能够在我商店中的路由器对象上调用 transitionTo。但是，此方法未定义，也未在我创建的任何其他对象上定义。

我是不是从根本上以错误的方式思考这个问题？还是我简单地结合了太多的例子并捏造了配置？

谢谢

Answer 1

此答案适用于 react-router <1.0，我在 1.0 中添加了相同的实现

你使用RouterStore来设置路由器的实例是正确的，所以你可以稍后抓取它并执行转换。

我已经使用过这个实现（在升级到 react-router 1.0 之前）我已经在 ES6 中完成了，但我会尝试在 ES5 中完成，但是我没有测试它:)

var Router = require('react-router')
var HistoryLocation = Router.HistoryLocation
var routes = require('./routes.js')
// You have a routeStore, i just use an exportable object with a getter and setter
var RouterContainer = require('./RouterContainer')

var router = Router.create({routes:routes, location:HistoryLocation})
RouterContainer.set(router)

router.run(function(handler) {
React.render(<Handler />, document.body)
})

我的 RouterContainer 看起来像这样

var _router = null
var o = {
set: function(router) { _router = router },
get: function() { return _router }
}

所以现在，在我检查登录信息的地方（在我的例子中是在一家商店）我只需要 RouterContainer 并执行转换

var RouterContainer = require('./RouterContainer')
RouterContainer.transitionTo('home')

再次希望这对您有所帮助，我不确定我是否在 ES5 中实现了正确的实现，我已经很长时间没有编写过这样的代码了:)

react-router 1.0中的思路相同

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

React.render(
<Router history={History}>{routes}</Router,
document.getElementById("app")
)

History.js

var createBrowserHistory = require('history/lib/createBrowserHistory')
module.exports = createBrowserHistory()

这意味着您现在可以通过以下方式要求外部组件的历史记录：

var History = require('./History')
History.pushState(null, ´/url/´)

使用带有 Flux 的 React Router 以编程方式重定向

Redirecting programatically using React Router with Flux

flux

node.js

express

reactjs

react-router