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页面,但是尝试了网上的很多方法,均失败了,特来请教,请各位大神不吝赐教,跪谢

阅读 5.1k
3 个回答

action是用来触发reducer的 可以先把登陆数据放到stroe里面 在登陆的生命周期componentWillReceiveProps里面写个判断 有登陆后的用户数据就 dispatch(push('/chat')) 这样就行了

你的意思是在action这个文件里面的中间件成功之后如何push router是吗,这个

push.then(()=>dispatch(push('/chat')))

从何而来吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题