react项目中,使用了redux及react-router,如何在登陆子页面进行登陆之后的页面跳转?

发布于 2022-09-06 21:22:04 字数 3824 浏览 13 评论 0

下面是源码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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

不念旧人 2022-09-13 21:22:04

一共找到了三种方法

孤独陪着我 2022-09-13 21:22:04

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

奶气 2022-09-13 21:22:04

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

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

从何而来吗

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文