Блог

Я последовал приведенному здесь примеру, чтобы попытаться создать базовую область аутентификации для своего приложения, и это решение мне в принципе очень нравится. Вот мой index.js :

 const store = createStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>
        <Route path="/" component={App}>
        <IndexRedirect to="authenticated" />
          <Route path="setup" component={SetupJourney} >
            <Route path="details" component={Details}/>
            <Route path="account" component={AccountType}/>
          </Route>
          <Route path="authenticated" component={requireAuthentication(secretPage)} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
);
 

а затем вот мой AuthenticatedComponent компонент более высокого порядка для обработки перенаправлений:

 export function requireAuthentication(Component) {

class AuthenticatedComponent extends React.Component {

    componentWillMount() {
        this.checkAuth();
    }

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

    checkAuth() {
        if (!this.props.isAuthenticated) {
            this.props.dispatch(pushState(null, '/setup/details', ''));
        }
    }

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

    }
}

const mapStateToProps = (state) => ({
    isAuthenticated: state.get('user').get('isAuthenticated')
});

return connect(mapStateToProps)(AuthenticatedComponent);

}
 

Я играю с этим целую вечность, и я не могу заставить компонент перенаправить. В Redux dev tools я вижу @@reduxReactRouter/historyAPI , что действие было запущено, но URL-адрес не меняется. Все соответствующие реквизиты / состояние и т.д., похоже, на месте too…is есть что-то, что я пропустил?

Спасибо

Для всех, кто сталкивался с этим, я в конце концов решил эту проблему, и возникло несколько проблем. Во-первых, pushState предназначен только для использования с browserHistory, поэтому мне нужно было переключиться с hashHistory.

После этого pushState по-прежнему не работал. Очевидно, это может произойти, когда промежуточное программное обеспечение указано в неправильном порядке. Я реструктурировал свой index.js , чтобы следовать шаблону в примере реального мира Redux, и все в конечном итоге сработало.

Ключевой момент в том, что теперь у меня store.js есть файл, который выглядит следующим образом:

 import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import { routerReducer, routerMiddleware} from 'react-router-redux';
import { browserHistory } from 'react-router';
import reducer, { INITIAL_STATE } from '../reducers/reducer';

const rootReducer = combineReducers({reducer, routing: routerReducer});
const composeEnhancers =
process.env.NODE_ENV !== 'production' amp;amp;
typeof window === 'object' amp;amp;
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
  }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(routerMiddleware(browserHistory))
);

const initialState = {'reducer': INITIAL_STATE};

export default function configureStore() {
  return createStore(rootReducer, initialState, enhancer);
}