reactjs:连接路由器在进行推送调用后不会重定向用户
reactjs: connected-router is not redirecting the user after push call is made
我希望我的 saga 在成功验证后将登录用户重定向到主仪表板屏幕。我遵循了以下文章中概述的代码:https://github.com/supasate/connected-react-router and example from 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>
)
}
}
history.js:
import { createBrowserHistory } from 'history';
export default createBrowserHistory;
store.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;
index.js
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 });
}
}
需要在两个地方使用同一个历史对象,例如在 history.js:
export default createBrowserHistory({basename: '/myrootpath'});
和index.js和store.js:
import history from './history';
我希望我的 saga 在成功验证后将登录用户重定向到主仪表板屏幕。我遵循了以下文章中概述的代码:https://github.com/supasate/connected-react-router and example from 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>
)
}
}
history.js:
import { createBrowserHistory } from 'history';
export default createBrowserHistory;
store.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;
index.js
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 });
}
}
需要在两个地方使用同一个历史对象,例如在 history.js:
export default createBrowserHistory({basename: '/myrootpath'});
和index.js和store.js:
import history from './history';