Программное перенаправление с использованием React Router с Flux

В настоящее время я работаю над проектом, используя 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;

На данный момент, после следующих примеров и сбора информации из источников, подобных приведенному здесь после входа в систему с помощью реактивного маршрутизатора

Я подумал, что тогда у меня должна быть возможность вызывать transitionTo для объекта маршрутизатора, который сейчас находится в моем магазине. Однако этот метод не определен и не определен ни для одного из других объектов, которые я создал.

Я принципиально неправильно думаю об этом? Или я просто объединил слишком много примеров и сфальсифицировал конфигурацию?

Спасибо


reactjs node.js react-router express flux
person CD-jS    schedule 03.12.2015    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Этот ответ для 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")
)

История.js

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

Это означает, что теперь вы можете запрашивать внешние компоненты истории:

var History = require('./History')
History.pushState(null, ´/url/´)
person Ditlev    schedule 03.12.2015