react-router-redux не меняет содержимое/вид

У меня настроен react-router-redux как в этом примере. Но dispatch(push(url)) не меняет ни содержимое/представление, ни URL-адрес в адресной строке. Хотя из моей консоли я вижу, что LOCATION_CHANGE и CALL_HISTORY_METHOD успешно вызываются с моим указанным адресом. В этом случае, если вход выполнен успешно, ожидаемый адрес redirect не загружается.

знак в действии

export function loginUser(email, password, redirect="/dashboard") {
  return function(dispatch) {
    dispatch(loginUserRequest());
    return fetch(`http://localhost:3000/users/sign_in/`, {
      ...
    })
    .then(parseJSON)
    .then(response => {
      try {
        let decoded = jwtDecode(response.token);
        dispatch(loginUserSuccess(response.token));
        dispatch(push(redirect));
      } catch (e) {
        ...
      }
    })
  }
}

маршруты.js

import React from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux'
...
import store from '../store';

const history = syncHistoryWithStore(browserHistory, store)

let Routes = 
  <Router history={history}>
    <Route path='/' component={MainContainer}>
      <IndexRoute component={Home} />
      <Route path='/sign_in' component={SigninForm} />
      <Route path='dashboard' component={authenticateComponent(Dashboard)} />
    </Route>
  </Router>

export default Routes;

store.js

import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import createLogger from 'redux-logger'
import reducers from './reducers';

const createStoreWithMiddleware  = compose(
  applyMiddleware(
    thunkMiddleware,
    createLogger()
  )
)

const store = createStore(reducers, createStoreWithMiddleware);

export default store;

AuthenticateComponent.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';

export function authenticateComponent(Component) {

  class AuthenticateComponent extends Component {

    componentWillMount () {
      this.checkAuth(this.props.isAuthenticated);
    }

    componentWillReceiveProps (nextProps) {
      this.checkAuth(nextProps.isAuthenticated);
    }

    checkAuth (isAuthenticated) {
      if (!isAuthenticated) {
        let redirectAfterLogin = this.props.location.pathname;
        this.props.dispatch(push(`/sign_in?next=${redirectAfterLogin}`));
      }
    }

    render () {
      return (
        <div>
          {this.props.isAuthenticated === true
            ? <Component {...this.props}/>
            : null
          }
        </div>
      )
    }
  }

  const mapStateToProps = (state) => ({
    token: state.auth.token,
    isAuthenticated: state.auth.isAuthenticated
  });

  return connect(mapStateToProps)(AuthenticateComponent);

}

Я также поставил routing: routerReducer в свои комбинированные редукторы. В чем может быть проблема в этом?


person spondbob    schedule 04.09.2016    source источник
comment
выводит ли он какие-либо ошибки на консоль. если на приборной панели есть какие-либо ошибки jsx, она может не перейти туда.   -  person vijayst    schedule 04.09.2016
comment
@vijayst На консоли нет ошибок. Вот почему я смущен, какая часть не работает. В основном любые dispatch(push(url)) после входа и выхода не перенаправляются на ожидаемый адрес.   -  person spondbob    schedule 04.09.2016
comment
если пользователь не аутентифицирован, страница панели управления перенаправляется обратно на страницу входа? Если да, то это еще одно место, требующее проверки.   -  person vijayst    schedule 04.09.2016
comment
@vijayst ничего не отображается, когда аутентифицированный пользователь пытается получить доступ к панели инструментов. Какое место может быть нужно проверить? Я добавил AuthenticateComponent.js   -  person spondbob    schedule 04.09.2016


Ответы (1)


Оказывается, мне нужно применить routerMiddleware, а также

person spondbob    schedule 04.09.2016
comment
Маршрутизатор React также имеет хук onEntry, который можно использовать для аутентификации. - person vijayst; 04.09.2016