在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ react項目中,使用了redux及react-router,如何在登陸子頁面進(jìn)

react項目中,使用了redux及react-router,如何在登陸子頁面進(jìn)行登陸之后的頁面跳轉(zhuǎn)?

下面是源碼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
    }
}

想法是登陸成功共之后跳轉(zhuǎn)到chat頁面,但是嘗試了網(wǎng)上的很多方法,均失敗了,特來請教,請各位大神不吝賜教,跪謝

回答
編輯回答
不討囍

action是用來觸發(fā)reducer的 可以先把登陸數(shù)據(jù)放到stroe里面 在登陸的生命周期componentWillReceiveProps里面寫個判斷 有登陸后的用戶數(shù)據(jù)就 dispatch(push('/chat')) 這樣就行了

2018年8月1日 20:09
編輯回答
雨萌萌

一共找到了三種方法

2018年4月28日 11:14
編輯回答
命于你

你的意思是在action這個文件里面的中間件成功之后如何push router是嗎,這個

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

從何而來嗎

2018年5月27日 15:00