javascript - redux-router 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) 很重要。注意：如果您安装了当前历史记录 (v 4.3.0)，它没有 createHistory 功能 -> 使用较低的历史记录 (v. 3.*.)

店铺：

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-Function

import { pushState } from 'redux-router';

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

我希望我没有忘记任何事情。-> 将你的历史模块添加到商店