react路由的安装:
在要创建项目的目录命令窗里输入:

cnpm install -g create-react-app

create-react-app  项目名
在创建好的项目目录命令窗里输入:

cnpm install react-router-dom --save(此处可以不用--save但是为了方便别人调用你的包时。更快捷的安装好依赖包,我们就得要写了,(cnpm install命令可以自动安装路由依赖文件))
 
 
 
2.根据路径,显示相应的组件
JSX路由的写法,路由的jsx组件
 
 
const Basic = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/page1">Page1</Link></li>
<li><Link to="/page2/123">Page2</Link></li>
</ul>
 
<hr/>
 
<Route exact path="/" component={App}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2/:id" component={Page2}/>
</div>
</Router>
)
 
exact:表示精确路劲
3.路由视图的格式:
<router>
//只能放置一个根元素比如一个div
<div>
//视图里,如果要实现内容相对应的跳转
<Link to='路径'></Link>
//决定什么路径显示什么组件
<route path='路径' component={组件名}>
</div>
</router>
 
4.动态路由:一个组件要根据路由变量显示不同的内容,路由变量通过props传值
<route path='/路径名/:变量名称' component={组件名}>
 
function Page2(props){
props.match.params.变量名称
return  相应的视图
}
 
 
3/路由试图的格式:
 
<Router>
 
//这里只能放置1个根元素
 
<div>
 
 
//试图里,如果需要内容的相对应的跳转,那么需要使用<link>
 
<Link to='/page1'>进入page1页面</Link>
 
 
//决定什么路径显示什么组件
 
<Route path='/page1' component={App} >
 
 
 
</div>
 
 
</Router>
 
 
 
 
4/动态路由:1个组件要根据,路由变量从而显示不同的内容,路由变量通过props进行传值
 
 

<Route path='/page2/:变量名称' component={Page2} >

 
 
function Page2(props){
 //通过props里的match属性获取相对应的变量
 props.match.params.变量名称
 
 return 相对应的试图
 
 
}
 
 
 
5/JS执行页面跳转
 
this.props.history.go(),前进/后退页面
 
this.props.history.goback(),返回页面
 
this.props.history.goforward,前进页面
 
 
 
 
6//路径直接跳转
 
this.props.history.push('路径名称'),跳转到相对应的路径

react路由的安装及格式和使用方法的更多相关文章

  1. Ubuntu系统中安装RPM格式包的方法

    Ubuntu的软件包格式为deb,而RPM格式的包则是Red Hat 相关系统所用的软件包.当我们看到一个想用的软件包时,如果他是RPM格式,而你的操作系统是Ubuntu,那岂不是很遗憾?其实,在Ub ...

  2. chrome无法拖拽离线安装CRX格式插件解决方法

    原文:http://chromecj.com/utilities/2018-09/1525.html 摘要 : chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法   有一部分网友反映子 ...

  3. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  4. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  5. react 路由 react-router@3.2.1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

  6. React 路由&脚手架

    1.创建react项目 npm install -g create-react-app 全局环境 create-react-app my-app 创建项目 cd my-app 进入项目 npm sta ...

  7. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  8. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  9. 简单的说一下react路由(逆战班)

    现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前 ...

随机推荐

  1. 回调函数: 一定要在函数名前加上 CALLBACK,否则有可能引起内存崩溃!

    今天又遇到一个莫名其妙的内存崩溃问题,问题代码 EnumChildWindows(...): EnumChildWindows(hwnd_panel_text_watermark, (WNDENUMP ...

  2. centos 7 安装appache 服务器

    一.安装Apache程序,一般有三种安装方式:1.直接网络安装:2.下载rpm包,上传至服务器进行安装:3.通过原代码编译安装: yum -y install httpd rpm -qa | grep ...

  3. NTT学习笔记

    和\(FFT\)相对应的,把单位根换成了原根,把共轭复数换成了原根的逆元,最后输出的时候记得乘以原\(N\)的逆元即可. #include <bits/stdc++.h> using na ...

  4. Luogu P4097 [HEOI2013]Segment 李超线段树

    题目链接 \(Click\) \(Here\) 李超线段树的模板.但是因为我实在太\(Naive\)了,想象不到实现方法. 看代码就能懂的东西,放在这里用于复习. #include <bits/ ...

  5. Luogu P2292 [HNOI2004]L语言

    题目链接 \(Click\) \(Here\) 好久没写\(DP\)了真是水平下降不少,一眼把这个题搞成贪心了,然后一发交上只有\(37\)分\(QwQ\) 这个题好像还可以\(AC\)自动机胡搞?不 ...

  6. python改文件名

    import os file_names = os.listdir('D:\\mobilefile\\_hd') for file_name in file_names : print(file_na ...

  7. Hadoop生态圈-Ambari控制台功能简介

    Hadoop生态圈-Ambari控制台功能简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在经历一系列安装过程之后(部署过HDP后我终于发现为什么大家喜欢用它了,部署比CDH简 ...

  8. vue-获取dom节点

    获取dom节点可以用ref属性,这个属性就是来获取dom对象的.看代码  这个属性就相当于给这个标签起了一个id样的东西 <input type="text" ref=&qu ...

  9. WebService概念和使用

    1.WebService到底是什么 一言以蔽之:WebService是一种跨编程语言和跨操作系统平台的远程调用技术. 所谓跨编程语言和跨操作平台,就是说服务端程序采用java编写,客户端程序则可以采用 ...

  10. canvas绘图history妙用

    function palette(canvas,ctx){ //初始化画布内部元素默认样式 this.strokeColor = 'red'; //默认选中红色触发颜色 this.fillColor ...