React学习(3)——Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接:
http://react-guide.github.io/react-router-cn/docs/Introduction.html
文档中介绍的很详细,下面将通过个人视角介绍Router的用法,并通过实例来呈现,可以给各位作为参考,记录个人心得。
一个网站,光有首页是不够的,需要添加页面跳转功能,才能让访问者逐层地看到网站丰富的内容。传统的前端页面使用超链接的方式进行跳转,比如:HTML标签中的 <a href=' '>点击</a> ,浏览器获取到链接地址后,会根据这个地址进行访问。
然而,React框架采用的Router却不是传统的链接跳转。因为,严格来说,React项目中的内容都是呈现在一张HTML中的,正如之前文章中介绍过的 index.html,
那么,在一张页面中,我们该如何去实现页面跳转呢。Router就提供了页面跳转渲染的方法,React应用会根据链接地址去决定要渲染的内容。也就是说,链接地址不再是用于直接跳转,而是告诉React,我需要怎么样的内容,让React进行渲染。
通俗来讲,就像去采购东西,我给你一张清单,你按照清单上的内容去获取相应的物件。
下面就直接通过实例来介绍React中Router的用法。
首先,我们打开已经构建完成的React项目目录,本人采用的是VScode编辑器
我们删去src目录下的所有文件,创建index.js文件,内容如下
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App/>, document.getElementById('root'));
然后创建App.js文件,内容如下:
import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import Home from './Home';
import Page1 from './Page1';
import Page2 from './Page2';
import Page3 from './Page3'; class App extends React.Component {
render(){
return(
<Router >
<div>
<Route path="/" component={Home} />
<Route path="/Page1" component={Page1} />
<Route path="/Page2" component={Page2} />
<Route path="/Page3" component={Page3} />
</div>
</Router>
)
}
}
export default App;
下面来分析一下,在上方的import中,载入了 BrowserRouter as Router 和 Route,其意思就是从react-router-dom
包中导入Router和Route,BrowserRouter是Router中的一种。
然后,下面依次引入了Home、Page1、Page2、Page3这四个组件,组件的内容之后会给出。
在组件的render函数的return里面,我们可以看到一对<Router>标签包含了四个<Route>标签,每个<Route>标签中都包含了path属性和component属性,path 属性用于储存路径,就是网站主页路径后面的内容,假如网站地址是localhost:3000,那么,locahost:3000后面的字符串就是path属性的内容。(注意,Router只能有一个子组件,所以要把所有Route标签用一个div包裹起来)
然后是 component 属性,其中储存了组件名称,当我们访问特定地址时就会渲染该组件,也可以称其为这一个路由的入口组件,可以由这个组件延伸开来搭建页面。
Home组件的内容如下(Home.js):
import React from 'react'; class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
</div>
);
}
} export default Home;
用于显示div标签中的This is Home!语句。
Page1-Page3组件类似,内容为:
import React from 'react'; class Page1 extends React.Component{
render(){
return(
<div>
<div>This is Page1!</div>
</div>
);
}
} export default Page1;
然后我们就可以来尝试一下访问这些页面,比如,我们在浏览器地址栏中输入localhost:3000/
可以看到:
当我们访问 localhost:3000/Page1 的时候就会看到
这里会产生一个疑问,为什么我们访问 /Page1 路径的时候会渲染Home组件的内容。
这是因为Home组件所在路由的 path为 “/”,而“/Page1”开头包含了 “/”,React就会默认渲染Home组件。
如果想在访问其他地址时不显示Home组件,可以在Home组件所在Route标签中加入 exact ,如下:
<div>
<Route exact path="/" component={Home} />
<Route path="/Page1" component={Page1} />
这样一来,当我们访问 localhost:3000/Page1 时就不会默认渲染Home组件。
关于Page2、Page3的访问也是一样,现在为止,我们可以通过输入地址的方式进行访问,但依然不够方便,那么我们就要设置一些访问入口,也就是传统页面中“超链接”所在地。
我们在Home组件中做如下更改:
import React from 'react';
import { Link } from 'react-router-dom'; class Home extends React.Component{
render(){
return(
<div>
<div>This is Home!</div>
<div>
<Link to="/Page1/" style={{color:'black'}}>
<div>点击跳转到Page1</div>
</Link>
<Link to="/Page2/" style={{color:'black'}}>
<div>点击跳转到Page2</div>
</Link>
<Link to="/Page3/" style={{color:'black'}}>
<div>点击跳转到Page3</div>
</Link>
</div>
</div>
);
}
} export default Home;
首先,我们要在上方用 import 引入一个 Link组件,这个组件由react-router-dom内部定义,用于链接跳转,在render函数的return中设置3对Link标签,to后面填写Page1的地址(“/Page1/”、“/Page1”皆可),并包含跳转链接的文字。
(style是设置字体颜色样式,可加可不加,关于样式的设置以后的文章中会讲到)
现在,我们访问 localhost:3000/ 可以看到:
点击其中一个链接就可以跳转到特定的页面,比如Page1:
注意,这里的跳转并没有访问新的html文件,而是由React改变了原本html页面中的内容。
现在,我们已经成功地使用 Router、Route 和 Link 实现了React页面跳转的功能,之后还会更新React相关文章,感谢各位支持。
React学习(3)——Router路由的使用和页面跳转的更多相关文章
- react ---- Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫
上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...
- angular2 学习笔记 ( Router 路由 )
参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...
- Asp.net core 学习笔记 ( Router 路由 )
和之前的一样用法. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory log ...
- android 学习第一天 了解事件机制,页面跳转等常用操作
点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...
- 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转
还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- < react router>: (路由)
< react router> (路由): 思维导图: Atrial 文件夹下的index.js 文件内容: import React, { Component } from 'rea ...
随机推荐
- CSS3媒体查询总结
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- webstrom 在脚本区域写其他语言得到语法提示
webstrom 在脚本区域写其他语言得到语法提示 webstrom 的提示小灯泡 点击inject language or reference 选择相应的语言. 如果写的内容比较多, 可以按照web ...
- Eclipse Common API
Platform runtime Defines the extension point and plug-in model. It dynamically discovers plug-ins an ...
- 搭建JUnit环境
1.下载 JUnit,这里用JUnit 4.7 下载链接: http://pan.baidu.com/s/1c23n7LQ 密码: i18e 2.可以直接 build path 引入:也可以创建 Us ...
- springTask和Schedule学习
Spring 4.x Task 和 Schedule 概述 http://www.jianshu.com/p/1778f6b9646e spring framework --- 定时任务(翻译官方文档 ...
- Hive的UDF(用户自定义函数)开发
当 Hive 提供的内置函数无法满足你的业务处理需要时,此时就可以考虑使用用户自定义函数(UDF:user-defined function). 测试各种内置函数的快捷方法: 创建一个 dual 表 ...
- React总结和遇到的坑
一.react项目 前端react后端node:https://github.com/GainLoss/react-juejin 前端react后端Pyton:https://github.com/G ...
- pip 安装下载好的tensorflow
pip --default-timeout=100 install C:\Users\Administrator\Downloads\tensorflow-1.12.0-cp37-cp37m-win_ ...
- 谣言粉碎机 - 极短时间内发送两个Odata request,前一个会自动被cancel掉?
背景 有时我们能在Chrome开发者工具的Network tab里观察到SAP UI5应用会发出某些状态为"取消"的OData请求.如下图第五个请求. 之前有一种似是而非的说法:极 ...
- 【[SCOI2015]情报传递】
非常无脑的板子题,就当是练一下板子 我们可以先将所有的操作离线下来,之后那些搜集过情报的点就有了点权,对于查询操作,就是查询一下这条路径上有几个点点权满足\(st<=now-C+1\) #inc ...