react-redux中实现页面跳转

叁歲伎倆 2022-05-25 01:45 282阅读 0赞

# react-redux中实现页面跳转 #

由于react-router版本变化，网上好些资料跑步起来。

当前使用版本如下:

"react-router": "^4.0.0",
        "react-router-dom": "^4.2.2",
        "react-router-redux": "^5.0.0-alpha.9",

*  安装

npm install --save react-router-redux@next
    npm install --save history

*  初始化步骤
    
    1.  初始化history

import createHistory from 'history/createBrowserHistory';
    
    const history = createHistory();

1.  初始化中间件

import { routerMiddleware } from 'react-router-redux';
    
    const historyMiddleware = routerMiddleware(history);

1.  使用routerReducer

import { routerReducer } from "react-router-redux";

1.  把historyMiddleware和routerReducer加入到redux的初始化流程中

const middlewares = process.env.NODE_ENV === 'development' ?
        [  applyMiddleware(createLogger()), applyMiddleware(promiseMiddleware),applyMiddleware(historyMiddleware), DevTools.instrument()] :
        [  applyMiddleware(createLogger()), applyMiddleware(promiseMiddleware),applyMiddleware(historyMiddleware),];
    
    
    const appReducer = combineReducers({
        authentication,
        user,
        routerReducer,
    })

1.  把history到路由中

import { ConnectedRouter } from "react-router-redux";
    import {history} from "config/store";
    
    
    <ConnectedRouter history={history}> ... </ConnectedRouter>

*  实现跳转

跳转比较方便，使用`dispatch(push(path))`，比如登录后的跳转

import {push} from 'react-router-redux';
    
    
            afterSuccess: (dispatch, getState, response) => {
                console.log("login success", response);
                localStorage.setItem('auth-token', response.data.access_token);     
                dispatch(push('/user'));       
            }

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关 SpringMVC实现页面跳转

SpringMVC实现页面跳转先在xml中配置前端控制器DispatcherServlet ![在这里插入图片描述][watermark_type_ZmFuZ3p

Bertha 。/ 2023年06月09日 03:52/ 0 赞/ 306 阅读

相关 php表单跳转页面跳转页面跳转页面跳转,html中一个form下两个跳转页面

问题说明：在html开发中，经常碰到同一个form表单下，不同按钮跳转不同界面，如下 ![3b2afef13409193c29d0759b8abcfff3.png][]，

太过爱你忘了你带给我的痛/ 2022年11月17日 10:16/ 0 赞/ 297 阅读

相关 jsp中页面跳转

1. 第一种是：<jsp:forward page=””/>; 2. 第二种是：response.sendRedirect(“地址”); 3. 第三种：

拼搏现实的明天。/ 2022年09月30日 00:36/ 0 赞/ 272 阅读

相关实现页面跳转

1. <meta http-equiv="refresh" content="5"> 这个表示当前页面每5秒钟刷一下，刷一下~ 2. <m

深藏阁楼爱情的钟/ 2022年06月18日 01:08/ 0 赞/ 315 阅读

相关 SpringMVC实现页面跳转

1.配置WEB-INF下面的web.xml文件注意：<param-value></param-value>中间的路径要指向src下面的应用的.xml文件（src下的xml文

港控/mmm°/ 2022年05月28日 06:06/ 0 赞/ 276 阅读

相关 react-redux中实现页面跳转

react-redux中实现页面跳转由于react-router版本变化，网上好些资料跑步起来。当前使用版本如下: "react-router": "^4

叁歲伎倆/ 2022年05月25日 01:45/ 0 赞/ 283 阅读

相关 Vue实现页面跳转

![70][]![70 1][] 如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: {

àì夳堔傛蜴生んèń/ 2022年05月22日 06:12/ 0 赞/ 353 阅读

相关 Android中使用Intent实现一般页面跳转和带参数页面跳转

一、Intent介绍 Intent的理解 Intent, 直译为意图, 也就是你想要做什么或想要去哪? Intent是Activity, Service和Br

短命女/ 2022年05月09日 03:18/ 0 赞/ 631 阅读

相关 jquery实现页面跳转

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

我会带着你远行/ 2022年03月16日 11:04/ 0 赞/ 383 阅读

相关 JQuery实现页面跳转

$(function(){ var pn = $("gotopagenum").val();//gotopagenum是文本框的id属性 l

港控/mmm°/ 2021年09月12日 01:20/ 0 赞/ 531 阅读