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;

此时，遵循以下示例并从此处的来源收集信息Automatic redirect after login with react-router

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

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

由于

Answer 1

这个答案适用于react-router＆lt; 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以编程方式重定向

1 个答案: