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传值以及获取的更多相关文章

  1. vue路由--动态路由

    前面介绍的路由都是路径和组件一对一映射的 有时候需要多个路径映射到一个组件,这个组件根据参数的不同动态改变,这时候需要用到动态路由 动态路由这样定义路由路径: path: '/foo/:id'--可以 ...

  2. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

  3. vue路由-动态路由和嵌套路由

    一.动态路由 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那么,我们可以在 vue-route ...

  4. CCNA - Part12 - 路由协议 (1) - 静态路由,动态路由 RIP

    路由器 在之前关于路由器的介绍中,我们知道它是网络互联的核心设备,用于连接不同的网络,在网络之间转发 IP 数据报.对于路由器来说,路由表是其内部最为重要的构成组件.当路由器需要转发数据时,就会按照路 ...

  5. IT菜鸟之路由器基础配置(静态、动态、默认路由)

    路由器:连接不同网段的设备 企业级路由和家用级路由的区别: 待机数量不同(待机量) 待机量:同时接通的终端设备的数量 待机量的值越高,路由的性能越好 别墅级路由,表示信号好,和性能无关 交换机:背板带 ...

  6. Cisco基础(二):三层交换vlan间通信、多交换机vlan间通信、三层交换配置路由、RIP动态路由配置、三层交换配置RIP动态路由

    一.三层交换vlan间通信 目标: VLAN实现了广播域的隔离,同时也将VLAN间的通信隔离了.三层交换技术使得VLAN间可以通信. 通过三层交换实现VLAN间通信 方案: 为了解决了传统路由器低速. ...

  7. Vlan间通讯,动态路由

    Vlan间通讯,动态路由 案例1:三层交换vlan间通信 案例2:多交换机vlan间通信 案例3:三层交换配置路由 案例4:RIP动态路由配置 案例5:三层交换配置RIP动态路由 1 案例1:三层交换 ...

  8. Vue | 自定义指令和动态路由实现权限控制

    功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...

  9. Flask(5)- 动态路由

    前言 前面几篇文章讲的路由路径(rule)都是固定的,就是一个路径和一个视图函数绑定,当访问这条路径时会触发相应的处理函数 这样无法处理复杂的情况,比如常见的一个课程分类下有很多个课程,那么他们的 p ...

  10. vue的动态路由(登录之后拿到动态路由通过addRouters()动态添加路由)

    登录后我们拿到路由动态路由,后端传的数据可能为这个 { path: '/index', meta: { title: '首页', icon: 'icon-shouye', tab_index: , / ...

随机推荐

  1. 10 Zabbix4.4.1系统告警“Zabbix server is not running”

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 Zabbix4.4.1系统告警“Zabbix server is not running” 第一步 ...

  2. 接口开发(login、reg)

    接口开发: import flask,json,pymysql,hashlib server = flask.Flask(__name__)# 把当前这个python文件当做一个服务 def my_d ...

  3. Tableau预测

    Tableau可以通过对现有的数据进行预测.

  4. 第二天·初识HTML

    一·什么是HTML HTML(HyperText Markup Language)是超文本标记语言,"超文本"的意思就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.不仅 ...

  5. sql 创建数据库并对数据库更改排序规则

    use master -- 设置当前数据库为master,以便访问sysdatabases表 go if exists(select * from sysdatabases where name='t ...

  6. 【LuoguP4557】[JSOI2018]战争

    题目链接 题意 给你两个点集. q次询问 , 每次把其中一个点集往一个方向移动 , 问两个点集的凸包还有没有交. Sol 闵可夫斯基和板子题. 把问题做如下转换: 我们本来两个凸包相交是相当于是对于移 ...

  7. Documents.Open返回值为null

    上个月出现的一个问题,将解决方法记录一下~ [问题]无法通过SAP系统外部OS命令(SM69)执行OS服务器上Powershell文件对Office文档的相关命令操作(打开文档等命令). [现象]执行 ...

  8. {"errcode":40029,"errmsg":"invalid code, hints: [ req_id: LEgfftXIRa-BU8_9 ]"}

    {"errcode":40029,"errmsg":"invalid code, hints: [ req_id: LEgfftXIRa-BU8_9 ...

  9. NURBS 曲线和曲面参数化

    NURBS 曲线和曲面参数化 什么是参数? 参数是曲线或曲面上点的唯一数值(类似于坐标).通过参数,可以沿曲线的长度方向引用特定点.参数值越大,点在曲线方向上的距离越远. 就像空间中的点具有三个维度( ...

  10. DES加密 DESEncrypt

    /// <summary> /// DES加密/解密类. /// </summary> public class DESEncrypt { public DESEncrypt( ...