代码之家  ›  专栏  ›  技术社区  ›  user1790300

ReactJS:进行推送调用后,连接的路由器没有重定向用户

  •  3
  • user1790300  · 技术社区  · 6 年前

    我希望我的SAGA在成功验证后将登录用户重定向到主仪表板屏幕。我遵循了以下文章中概述的代码: https://github.com/supasate/connected-react-router 示例来自 https://github.com/supasate/connected-react-router/tree/master/examples/basic . 当从SAGA中调用push命令时,我可以看到URL的变化,但是页面没有重定向到仪表板屏幕。相反,用户只是停留在同一个屏幕上。我目前正在运行react redux v6、react v16.4.1、react router:v4.3.1、react router redux v4.0.8。我可能做错什么了?

    App.JS :

    class App extends Component {
      constructor() {
        super();
        this.state = {
          loading: true,
          loaded: false
        }
      }
    
      componentDidMount() {
        window.addEventListener('load', () => {
          this.setState({loading: false});
          setTimeout(() => this.setState({loaded: true}), 500);
        });
      }
    
      render() {
        const loaded = this.state.loaded;
        const {history} = this.props;
        return (
          <div>
            {!loaded && <div className={`load${this.state.loading ? '' : ' loaded'}`}>
              <div className='load__icon-wrap'>
                <svg className='load__icon'>
                  <path fill='#4ce1b6' d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z'/>
                </svg>
              </div>
            </div>}
            <div>
              <ConnectedRouter history={history}>
                <Router/>
              </ConnectedRouter>
            </div>
          </div>
        )
      }
    }
    

    历史,JS :

    import { createBrowserHistory } from 'history';
    
    export default createBrowserHistory;
    

    JS :

    import {createStore, applyMiddleware} from 'redux';
    import {reducer as reduxFormReducer} from 'redux-form';
    import createSagaMiddleware from 'redux-saga';
    import sagas from '../redux/sagas';
    import reducers from '../redux/reducers';
    import { createBrowserHistory,  } from 'history';
    import { routerMiddleware } from 'connected-react-router';
    
    const history = createBrowserHistory({ basename: '/myrootpath' });
    
    const sagaMiddleware = createSagaMiddleware();
    
    const store = createStore(reducers(history), applyMiddleware(routerMiddleware(history), sagaMiddleware));
    
    store.runSaga = sagaMiddleware.run(sagas);
    // store.asyncReducers = {};
    const action = type => store.dispatch({type })
    
    export default store;
    

    索引文件

    import React from 'react';
    import App from './app/App';
    import {render} from 'react-dom'
    import {Provider} from 'react-redux'
    import {BrowserRouter} from 'react-router-dom';
    import store from './app/store';
    import ScrollToTop from './app/ScrollToTop';
    import { createBrowserHistory } from 'history';
    
    const history = createBrowserHistory()
    
    render(
      <Provider store={store}>
          <BrowserRouter basename='/myrootpath'>
              <ScrollToTop>
                  <App history={history}/>
              </ScrollToTop>
          </BrowserRouter>
      </Provider>,
      document.getElementById('root')
    );
    

    传奇代码 :

    function* login(params){
    try {
        const api = new UserApi();
        const {username, password} = params.login;
        const user = yield call(api.login, {username, password});
        debugger;
        yield put(push('/dashboard_default'));
    } catch (error) {
        debugger;
        yield put({ type: types.LOAD_ERROR, error });
    }
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   Aprillion    6 年前

    两个地方都需要使用相同的历史对象,例如 历史,JS :

    export default createBrowserHistory({basename: '/myrootpath'});
    

    而在 索引文件 JS :

    import history from 'history';