React路由安装使用和多种方式传参
安装路由
npm i react-router-dom -S
引入路由
import {
BowserRouter as Router,
Route,
Switch,
...
} from "react-router-dom"
整个项目顶层需要用<Router>包裹 并且 <Router>组件内只能有一个直接子级元素
例如:
let App = props => (<Router>
<div>
<Route path="xxx" component={xxx} />
<Route path="xxx" component={yyy} />
...
</div>
</Router>)
render(<App />,document.getElementById("app"))
使用BowserRouter需要对服务器做配置 对于webpack-dev-server而言 需要添加属性
devServer : {
conentBase:"",
...,
historyApiFallback:true,
disableHostCheck: true,
}
Route组件有下列属性
path : 路径
component : 组件
redirect : 重定向
exact : 严格匹配
react中 4.0之后的路由采用的是分布式路由 <Route> 本身即路由窗口
在该版本的路由中 默认即多视图路由
只要多个Route 配置相同路径 即可在同一路径下加载多个组件
若只希望一个路径下仅加载一个组件 用<Switch>包裹住多个<Route>即可
例如:
<Switch>
<Route path="xxx" component={xxx} />
<Route path="xxx" component={yyy} />
</Switch>
此时 路径为xxx时 仅加载xxx而并非加载 xxx 和 yyy
路由跳转
标签跳转
<Link to={ {pathname:"/home"} }>首页</Link>
js跳转(编程式导航)
this.props.history.push()
this.props.history.replace()
值得注意的是 并非所有组件的props都有history属性
仅在通过<Route>加载进来的组件 props下才会存在history属性
如果props不存在history属性的子组件也想通过js实现路由跳转
可用props有history属性的父组件通过props传递给子组件即可
路由传参
search传参(问号传参)
<Link to{ {pathname:"/home",search:data }></Link>
接收参数
this.props.location.search 接收即可
只是此时 search为字符串类型格式如下: username=zhuiszhu&age=18
需要我们手动转换成对象才能方便使用
params传参(动态路由)
路由配置
<Route path="/detail/:id" />
传递参数
let goodsID = 123
<Link to={pathname:"/detail/"+goodsID} ></Link>
接收参数
this.props.match.params.id
此处props的math同上述中的history属性
React路由安装使用和多种方式传参的更多相关文章
- 同一路由带参刷新，以及params和query两种方式传参的异同
同一路由应该不叫跳转了吧,就先叫刷新好了. 需求及问题 今天做web课设有这样一个需求: 在导航栏中一项叫做教师队伍一级菜单下,有三个二级菜单,分别为教授.副教授.讲师.这三个二级菜单分别对应一个页面 ...
- 二十一、springboot之定制URL匹配规则（项目中遇到的问题：get方式传参，带有小数点，被忽略）
一.问题描述: get方式传参,在传送价格,积分时(带有小数点),debug后台微服务接受到的参数,却不带小数点,如:price是0.55,后台接受后却是0 二.解决 在WebConfiguratio ...
- 使用Fiddler工具发送post请求（带有json数据）以及get请求（Header方式传参）
Fiddler工具是一个http协议调试代理工具,它可以帮助程序员测试或调试程序,辅助web开发. Fiddler工具可以发送向服务端发送特定的HTTP请求以及接受服务器回应的请求和数据,是web调试 ...
- vue：子组件通过调用父组件的方法的方式传参
在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...
- RESTful Get方式传参json格式后端400 解决方案
前端采用vue+axios 后端采用spring boot restful 问题: 前端get 请求需要传递array 字段值 后端由于tomcat 版本问题,不支持url接受特殊字符包括 [] {} ...
- python flask学习第2天 URL中两种方式传参
新创建项目 自己写个url映射到自定义的视图函数 在url中传递参数 app.py from flask import Flask app = Flask(__name__) @app.route ...
- Flutter 路由 页面间跳转和传参 返回
Navigator Navigator用来管理堆栈功能(即push和pop),在Flutter的情况下,当我们导航到另一个屏幕时,我们使用Navigator.push方法将新屏幕添加到堆栈的顶部.当然 ...
- 【MyEcplise SVN】myEcplise上安装SVN的多种方式
第一种:SVN的在线安装 1.打开MyEclipse,找到顶部菜单栏 Help(帮助)-Install from Site-(从网站安装),如下图 2. 然后: 点击Install from Site ...
- vue路由跳转的多种方式
1.router-link to 跳转 <router-link to="/child"><button>跳转</button></rou ...
随机推荐
- 3-剑指Offer: 连续子数组的最大和
题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...
- uiautomator 调试例子
package com.bing.cn; import com.android.uiautomator.testrunner.UiAutomatorTestCase; public class Dem ...
- 搭建Dubbo Admin（五）
Dubbo Admin下载地址(2019年9月8日):https://github.com/apache/dubbo-admin 注意:JDK要求1.8以上 1. 进入到模块 dubbo-admin- ...
- QT控制文本框输入内容
利用正则表达式,例: //即账号最长为10位,只能由数字组成 QRegExp regx("[0-9]{1,10}"); QValidator *validator = new QR ...
- nowcoder907B n的约数
题意 t次询问,每次给你一个数n,求在[1,n]内约数个数最多的数的约数个数 \(t \le 500,n \le 10^{19}\) 思路 首先可以想到将n质因数分解.即\(n= \prod\limi ...
- vijos2054 SDOI2019 热闹的聚会与尴尬的聚会
题目链接 思路 首先观察题目最后的式子\(\lfloor \frac{n}{p + 1} \rfloor \le q\) 并且\(\lfloor \frac{n}{q+1} \rfloor \le p ...
- Ubuntu16LTS使用笔记(Server版）
环境测试:Ubuntu Server 16.04.06 x64 虚拟机 以下均需要root权限,请sudo 或 su root 解决只有先启动Windows再重启到Linux才能使用usb网卡的问题: ...
- uniApp上传图片
项目中用到了上传图片的功能,记录一下.增强记忆. 要上传图片首先就要先选择图片,或者是先拍照,此时先调用的是 chooseImage 接口,此接口可选择拍照也可以从相册中选择. 它有几个参数,具体可以 ...
- mod35云掩膜产品用法
在网上一直没找到一个明确说怎么用MOD35产品的,都是说去看用户手册,第一次看了过一段时间我又忘记怎么搞了,赶紧记下来. 而且现在才发现第一次自己搞的都弄错了. 简单的判断是否是云,只要读取mod35 ...
- 用欧拉计划学Rust语言（第17~21题）
最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识.学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快速入门的办法. 学习任何一项技能最怕没有 ...