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

Posted 2023-02-22

【中文标题】使用带有 Flux 的 React Router 以编程方式重定向

【英文标题】：Redirecting programatically using React Router with Flux

【发布时间】：2016-03-07 23:10:41

【问题描述】：

我目前正在使用 NodeJS、Express、Flux 和 React 以及 React Router 进行客户端路由的项目。

我可能对流程应该如何工作有错误的想法，但我目前正在尝试在成功登录后将用户重定向到主屏幕。不幸的是，我为 React Router 找到的很多示例都是针对 Pre-Version 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。但是这个方法没有定义，也没有在我创建的任何其他对象上定义。

我从根本上认为这是错误的方式吗？还是我只是简单地组合了一个太多的例子并捏造了配置？

谢谢

【参考方案1】：

此答案适用于 react-router

您使用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/´)