react项目中,使用了redux及react-router,如何在登陆子页面进行登陆之后的页面跳转?
下面是源码store.js
import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
import logger from 'redux-logger';
import middlePromise from 'redux-promise';
import thunkMiddleware from 'redux-thunk';
const store = createStore(reducer,applyMiddleware(thunkMiddleware,middlePromise,logger));
export default store;
入口文件index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import registerServiceWorker from './registerServiceWorker';
import './App.css';
import Header from './header';
import Main from './main';
import Footer from './footer';
import Login from './login/index'
import {
BrowserRouter as Router,
Route,
Switch
} from 'react-router-dom';
import { Provider} from 'react-redux'
import store from './store'
const Home = () => (
<div>
<h3>Home</h3>
</div>
)
const Chat=()=>(
<div className="App">
<Header></Header>
<Main></Main>
<Footer></Footer>
</div>
)
const LoginPage=()=>(<Login />)
class App extends Component{
render(){
return (
<Router>
<div style={{height:'100%'}}>
<Switch>
<Route exact path="/" component={LoginPage}/>
<Route path="/chat" component={Chat}/>
<Route path="/home" component={Home}/>
<Route path="/login" component={Login}/>
</Switch>
</div>
</Router>)
}
}
store.router=Router
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
registerServiceWorker();
`
登陆页面的loginActions:
import {
FETCHING_PEOPLE,
FETCHING_PEOPLE_SUCCESS,
FETCHING_PEOPLE_FAILURE } from './loginConst'
import {browserHistory ,history,Route,} from 'react-router-dom';
import {push} from 'react-router-redux'
import {getData,postData} from '../fetchData'
import { message } from 'antd';
export function fetchPeopleFromAPI(values) {
return dispatch => {
dispatch(peopleLogin());
return postData('/userlogin',{userInfo:values})
.then(res => res.data)
.then(json => dispatch(peopleLoginSuccess(json)))
.then(()=>dispatch(push('/chat')))
.catch(err => dispatch(peopleLoginFailure(err)))
}
}
export function registerNewUser(values) {
return dispatch=>{
dispatch(registeringNewUser());
return postData('/registerNewUser',{userinfo:values})
.then(res=>JSON.stringify(res))
.then(json=>dispatch(registerSuccess(json.state)))
.catch(err=>dispatch(registerFailure(err)))
}
}
export function registeringNewUser(){
message.info('正在注册新用户');
return {
type:'REGISTERING_NEWUSER'
}
}
function registerSuccess(result){
console.log(result)
if(result.state==='error'){
throw new Error();
}
message.success('成功注册新用户');
return {
type:'REGISTERING_NEWUSER_SUCCESS',
payload:result
}
}
function registerFailure(err){
message.warning('注册新用户失败');
return{
type:'REGISTERING_NEWUSER_FAILURE',
err
}
}
export function peopleLogin(){
return {
type:FETCHING_PEOPLE
}
}
function peopleLoginSuccess(data){
if(data.loginState==='error'){
throw data.msg;
}
message.success(data.msg);
// store.dispatch(push('/chat'))
return {
type:FETCHING_PEOPLE_SUCCESS,
data:data.userMatched
}
}
function peopleLoginFailure(err){
message.warning(err);
return {
type:FETCHING_PEOPLE_FAILURE
}
}
想法是登陆成功共之后跳转到chat页面,但是尝试了网上的很多方法,均失败了,特来请教,请各位大神不吝赐教,跪谢
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
一共找到了三种方法
action是用来触发reducer的 可以先把登陆数据放到stroe里面 在登陆的生命周期componentWillReceiveProps里面写个判断 有登陆后的用户数据就 dispatch(push('/chat')) 这样就行了
你的意思是在action这个文件里面的中间件成功之后如何push router是吗,这个
从何而来吗