Reactjs之静态路由、动态路由以及Get传值以及获取
1、新增知识点
/*
react路由的配置:
1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
2、安装 cnpm install react-router-dom --save
3、找到项目的根组件引入react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制官网文档根组件里面的内容进行修改 (加载的组件要提前引入)
<Router>
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</Router>
exact表示严格匹配
react动态路由传值
1、动态路由配置
<Route path="/content/:aid" component={Content} />
2、对应的动态路由加载的组件里面获取传值
this.props.match.params
跳转:<Link to={`/content/${value.aid}`}>{value.title}</Link>
react get传值
1、获取 this.props.location.search
*/
2、案例实现路由配置
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
class App extends Component {
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/product">商品</Link>
</header>
<br />
<hr />
<br />
<Route exact path="/" component={Home} />
<Route path="/news" component={News} />
<Route path="/product" component={Product} />
</div>
</Router>
);
}
}
export default App;
3、动态路由以及获取传值案例
import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Product extends Component {
constructor(props) {
super(props);
this.state = {
list:[ {
aid:'',
title:'我是商品1111'
},
{
aid:'',
title:'我是商品222'
},
{
aid:'',
title:'我是商品333'
},
{
aid:'',
title:'我是商品4444'
}
]
};
}
//生命周期函数
componentDidMount(){
// this.props.location.search
//获取get传值
console.log(url.parse(this.props.location.search,true));
var query=url.parse(this.props.location.search,true).query;
console.log(query)
}
render() {
return (
<div>
我是商品组件
<ul>
{
this.state.list.map((value,key)=>{
return (
<li key={key}>
<Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link>
</li>
)
})
}
</ul>
</div>
);
}
}
export default Product;
Reactjs之静态路由、动态路由以及Get传值以及获取的更多相关文章
- vue路由--动态路由
前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
- vue路由-动态路由和嵌套路由
一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...
- CCNA - Part12 - 路由协议 (1) - 静态路由,动态路由 RIP
路由器 在之前关于路由器的介绍中,我们知道它是网络互联的核心设备,用于连接不同的网络,在网络之间转发 IP 数据报.对于路由器来说,路由表是其内部最为重要的构成组件.当路由器需要转发数据时,就会按照路 ...
- IT菜鸟之路由器基础配置(静态、动态、默认路由)
路由器:连接不同网段的设备 企业级路由和家用级路由的区别: 待机数量不同(待机量) 待机量:同时接通的终端设备的数量 待机量的值越高,路由的性能越好 别墅级路由,表示信号好,和性能无关 交换机:背板带 ...
- Cisco基础(二):三层交换vlan间通信、多交换机vlan间通信、三层交换配置路由、RIP动态路由配置、三层交换配置RIP动态路由
一.三层交换vlan间通信 目标: VLAN实现了广播域的隔离,同时也将VLAN间的通信隔离了.三层交换技术使得VLAN间可以通信. 通过三层交换实现VLAN间通信 方案: 为了解决了传统路由器低速. ...
- Vlan间通讯,动态路由
Vlan间通讯,动态路由 案例1:三层交换vlan间通信 案例2:多交换机vlan间通信 案例3:三层交换配置路由 案例4:RIP动态路由配置 案例5:三层交换配置RIP动态路由 1 案例1:三层交换 ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- Flask(5)- 动态路由
前言 前面几篇文章讲的路由路径(rule)都是固定的,就是一个路径和一个视图函数绑定,当访问这条路径时会触发相应的处理函数 这样无法处理复杂的情况,比如常见的一个课程分类下有很多个课程,那么他们的 p ...
- vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)
登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...
随机推荐
- 10 Zabbix4.4.1系统告警“Zabbix server is not running”
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 Zabbix4.4.1系统告警“Zabbix server is not running” 第一步 ...
- 接口开发(login、reg)
接口开发: import flask,json,pymysql,hashlib server = flask.Flask(__name__)# 把当前这个python文件当做一个服务 def my_d ...
- Tableau预测
Tableau可以通过对现有的数据进行预测.
- 第二天·初识HTML
一·什么是HTML HTML(HyperText Markup Language)是超文本标记语言,"超文本"的意思就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.不仅 ...
- sql 创建数据库并对数据库更改排序规则
use master -- 设置当前数据库为master,以便访问sysdatabases表 go if exists(select * from sysdatabases where name='t ...
- 【LuoguP4557】[JSOI2018]战争
题目链接 题意 给你两个点集. q次询问 , 每次把其中一个点集往一个方向移动 , 问两个点集的凸包还有没有交. Sol 闵可夫斯基和板子题. 把问题做如下转换: 我们本来两个凸包相交是相当于是对于移 ...
- Documents.Open返回值为null
上个月出现的一个问题,将解决方法记录一下~ [问题]无法通过SAP系统外部OS命令(SM69)执行OS服务器上Powershell文件对Office文档的相关命令操作(打开文档等命令). [现象]执行 ...
- {"errcode":40029,"errmsg":"invalid code, hints: [ req_id: LEgfftXIRa-BU8_9 ]"}
{"errcode":40029,"errmsg":"invalid code, hints: [ req_id: LEgfftXIRa-BU8_9 ...
- NURBS 曲线和曲面参数化
NURBS 曲线和曲面参数化 什么是参数? 参数是曲线或曲面上点的唯一数值(类似于坐标).通过参数,可以沿曲线的长度方向引用特定点.参数值越大,点在曲线方向上的距离越远. 就像空间中的点具有三个维度( ...
- DES加密 DESEncrypt
/// <summary> /// DES加密/解密类. /// </summary> public class DESEncrypt { public DESEncrypt( ...