React 版本16.9.0 中配置路由以及路由传参

╰半橙微兮° 2023-06-04 13:00 63阅读 0赞

我的脚手架版本如下：

"dependencies": {
        "antd": "^3.21.4",
        "jquery": "^3.4.1",
        "lodash": "^4.17.15",
        "react": "^16.9.0",
        "react-dom": "^16.9.0",
        "react-router": "^5.0.1",
        "react-router-dom": "^5.0.1"
      },
      "devDependencies": {
        "@types/react": "^16.9.1",
        "@types/react-dom": "^16.8.5",
        "@types/react-router": "^5.0.3",
        "ajv": "^6.2.1",
        "css-loader": "^3.2.0",
        "file-loader": "^4.2.0",
        "less": "^2.7.2",
        "less-loader": "^4.0.5",
        "source-map-loader": "^0.2.4",
        "style-loader": "^1.0.0",
        "ts-loader": "^6.0.4",
        "typescript": "^3.5.3",
        "url-loader": "0.5.8",
        "webpack": "^4.39.1",
        "webpack-cli": "^3.3.6"
      }

由于版本更新后，hashhistory不再通过react-router获得，所以添加一个新的react-router-dom

具体配置如下：

![379702-20190817165310602-1421148966.png][]

代码中如果跳转可以通过Link标签和history()的方式完成。代码如下：

1、Link标签

import { Link } from "react-router-dom";
    <Link to='/' title='退出'></Link>

带参数的自己去查一下把。

2、history()

返回

this.props.history.goBack();

跳转

this.props.history.push(`/main/agent/add/${editable}`);

跳转后的页面获取参数的方式：

let editable = eval(this.props.match.params['editable']);

eval的目的是将json字符串转换成json对象。

转载于:https://www.cnblogs.com/janken/p/11369322.html

[379702-20190817165310602-1421148966.png]: /images/20230601/04ae5cf45ef94fe68166bcc5a3d008b2.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 145 阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 62 阅读

相关 React 版本16.9.0 中配置路由以及路由传参

我的脚手架版本如下： "dependencies": { "antd": "^3.21.4", "jquery": "^3.4.1",

╰半橙微兮°/ 2023年06月04日 13:00/ 0 赞/ 64 阅读

相关 vue路由传参

vue路由跳转页面传参 1、使用路由url携带参数传递主页Main.vue模板脚本 <template> <div class="hell

迷南。/ 2022年11月29日 13:28/ 0 赞/ 389 阅读

相关 React note12（脚手架：路由&路由跳转&withRouter&路由传参&路由render渲染&路由验证&路由钩子&路由懒加载）

路由简介 -------------------- 根据不同的url，来切换对应的组件。实现spa（单页面应用）应用：整个项目只有一个完整页面，页面切换不会刷新页

Dear 丶/ 2022年11月29日 13:21/ 0 赞/ 409 阅读

相关 angular 路由传参

cart.component.ts import { Component, OnInit } from '@angular/core'; import {Ro

偏执的太偏执、/ 2022年06月01日 06:54/ 0 赞/ 347 阅读

相关路由传参

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></titl

末蓝、/ 2022年06月01日 00:14/ 0 赞/ 381 阅读

相关 vue 路由传参

this.$router.push({path:'home',name:'主页'params:{id:1}} 或者 <router-link :to="{

àì夳堔傛蜴生んèń/ 2022年05月29日 09:00/ 0 赞/ 376 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 701 阅读

相关路由传参和路由卫士

1.动态路由匹配动态路由也可以叫做路由传参。组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容。那么在这个时候就需要动态路由。 1. 动态

古城微笑少年丶/ 2021年08月19日 15:06/ 0 赞/ 569 阅读