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: , / ...
随机推荐
- Zookeeper常见问题FAQ
Zookeeper 常见问题FAQ 1.Zookeeper设置权限之坑 大家都知道,zookeeper创建节点默认的权限为:world:anyone:crdwa 设置权限时,当不小心设置成只读r,那么 ...
- 阿里云-docker安装redis AND(docker基本操作命令)
docker官网:https://hub.docker.com/search?q=redis&type=edition&offering=enterprise 1.拉取最新的redis ...
- Spring相关概念
DIP: Dependency Inversion Principle.翻译过来是依赖反转原则,也叫依赖倒置原则. 依赖倒置原则是设计模式几个重要原则之一.具体定义就是,底层模块依赖高层模块定义的接口 ...
- IC SPEC相关数据
---恢复内容开始--- 静态电流:静态电流是指没有信号输入时的电流,也就是器件本身在不受外部因素影响下的本身消耗电流. 纹波电压的害处: 1.容易在用设备中产生不期望的谐波,而谐波会产生较多的危害: ...
- 解决 Maven项目进行编译( mvn compile )时出现的错误
错误信息: 在 pom.xml 文件 设置一下Maven的属性 <!--Maven 属性--> <properties> <!--项目的编码格式--> <pr ...
- canvas画圆又毛边
canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang="en" ...
- 【Linux学习四】Linux下Vim命令操作
1.Vim介绍 Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器,在Vi的基础上改进和增加了很多特性. 第一阶段通过vimtutor的学习,加强vim的熟练度 1.1光标移动 hjkl左 ...
- docker-compose容器互相连接
一些示例未整理 haproxy 与nginx 容器连接 ## 服务的compose 编写 mkdir /mnt/compose vim docker-compose.yml web1: image: ...
- head first 设计模式笔记8-模板方法模式
模板设计模式:就是定义一个算法的骨架,而将具体的算法延迟到子类中来实现. 优点:使用模板方法模式,在定义算法骨架的同时,可以很灵活的实现具体的算法,满足用户灵活多变的需求. 缺点:如果算法骨架有修改的 ...
- C# 输出双引号
Response.Write("前一页面的标题是:\"" +Page.PreviousPage.Title.ToString()+"\"") ...