redux-路由器pushState不是一个函数

Question

取自这个项目https://github.com/joshgeller/react-redux-jwt-auth-example#how-it-works，我有一个错误，在

import { pushState } from 'redux-router';
...
checkAuth (isAuthenticated) {
  if (!isAuthenticated) {
    let redirectAfterLogin = this.props.location.pathname;
    this.props.dispatch(pushState(null, `/signin?next=${redirectAfterLogin}`));
  }
}
...

上面写的是Uncaught TypeError: (0 , _reduxRouter.pushState) is not a function。

我并没有像现在这样运行项目，我实现了对我自己的项目的身份验证。我错过了什么吗？

Answer 1

将历史记录添加到路由器(createHistory)非常重要。注意:如果您安装了当前历史记录(v4.3.0)，则它没有createHistory函数，请使用较低版本(v3..*)的->函数。

商店：

import {combineReducers} from 'redux'
    import {routerReducer} from 'react-router-redux'
    import { createHistory } from 'history';
    {...more imports}

    const reducer = combineReducers({
        ...rootReducer,
        routing: routerReducer
    });


    function configureStore(initialState) {
        return createStore(
            reducer,
            initialState,
            composeEnhancers(
                applyMiddleware(
                    thunkMiddleware
                ),
                reduxReactRouter({createHistory})
            )
        )
    }

export const store = configureStore(
    {}
);

将组件呈现为DOM

import {store} from './store/store';
import {syncHistoryWithStore} from 'react-router-redux'
import { browserHistory } from 'react-router';
{...more imports}

const history = syncHistoryWithStore(browserHistory, store);

ReactDOM.render(
    <Provider store={store}>
        <Router history={history}>
            {...}
        </Router>
    </Provider>,
    document.getElementById('root')
)

现在可以使用pushState-函数了

import { pushState } from 'redux-router';

export function logoutAndRedirect() {
    return (dispatch, state) => {
        dispatch(logout());
        dispatch(pushState(null, '/login'));
    }
}

我希望我没有忘记任何东西。->将您的历史记录模块添加到存储中