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路由的使用和页面跳转的更多相关文章

  1. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  2. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  3. vue路由守卫+cookie实现页面跳转时验证用户是否登录----(二)设置路由守卫

    上一篇我们已经封装好了cookie方法,登录成功之后也可以吧用户信息存到cookie中,接下来需要在router/index.js中引入一下cookie.js文件 然后继续添加以下代码 /* * be ...

  4. angular2 学习笔记 ( Router 路由 )

    参考 : https://angular.cn/docs/ts/latest/guide/router.html#!#can-activate-guard https://angular.cn/doc ...

  5. Asp.net core 学习笔记 ( Router 路由 )

    和之前的一样用法. public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory log ...

  6. android 学习第一天 了解事件机制,页面跳转等常用操作

    点击时间2种 第一种,通过初始化页面 写入点击事件 protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedI ...

  7. 关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

    还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p ...

  8. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  9. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

随机推荐

  1. CSS3媒体查询总结

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  2. webstrom 在脚本区域写其他语言得到语法提示

    webstrom 在脚本区域写其他语言得到语法提示 webstrom 的提示小灯泡 点击inject language or reference 选择相应的语言. 如果写的内容比较多, 可以按照web ...

  3. Eclipse Common API

    Platform runtime Defines the extension point and plug-in model. It dynamically discovers plug-ins an ...

  4. 搭建JUnit环境

    1.下载 JUnit,这里用JUnit 4.7 下载链接: http://pan.baidu.com/s/1c23n7LQ 密码: i18e 2.可以直接 build path 引入:也可以创建 Us ...

  5. springTask和Schedule学习

    Spring 4.x Task 和 Schedule 概述 http://www.jianshu.com/p/1778f6b9646e spring framework --- 定时任务(翻译官方文档 ...

  6. Hive的UDF(用户自定义函数)开发

    当 Hive 提供的内置函数无法满足你的业务处理需要时,此时就可以考虑使用用户自定义函数(UDF:user-defined function). 测试各种内置函数的快捷方法: 创建一个 dual 表 ...

  7. React总结和遇到的坑

    一.react项目 前端react后端node:https://github.com/GainLoss/react-juejin 前端react后端Pyton:https://github.com/G ...

  8. pip 安装下载好的tensorflow

    pip --default-timeout=100 install C:\Users\Administrator\Downloads\tensorflow-1.12.0-cp37-cp37m-win_ ...

  9. 谣言粉碎机 - 极短时间内发送两个Odata request,前一个会自动被cancel掉?

    背景 有时我们能在Chrome开发者工具的Network tab里观察到SAP UI5应用会发出某些状态为"取消"的OData请求.如下图第五个请求. 之前有一种似是而非的说法:极 ...

  10. 【[SCOI2015]情报传递】

    非常无脑的板子题,就当是练一下板子 我们可以先将所有的操作离线下来,之后那些搜集过情报的点就有了点权,对于查询操作,就是查询一下这条路径上有几个点点权满足\(st<=now-C+1\) #inc ...