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

React-Router的中文文档可以参照如下链接:

http://react-guide.github.io/react-router-cn/docs/Introduction.html

首先,我们打开已经构建完成的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页面跳转的功能.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我的前端路

web 10个优秀资源让你迅速精通正则表达式

正则表达式是每个程序开发人员的必备技能。任何开发项目,不管使用什么编程语言,都需要从给定的数据提取值并进行验证。例如对输入内容的验证,过滤 URL 变量等等,正...

13530
来自专栏京程一灯

用纯 JavaScript 撸一个 MVC 框架[每日前端夜话0xA5]

我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序,于是我这样做了。希望它可以帮你理解 MVC,因为当你...

12940
来自专栏趣谈前端

一张图教你快速玩转vue-cli3

本文系统的梳理了vue-cli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点:

8810
来自专栏前端达人

「JS小技巧」随机不重复的ID,模板标签替换,XML与字符串互转,快速取整

今天笔者整理了一份自己最近用到的一些小技巧分享给大家,虽然都是基础技术,不过在某些特殊时刻还蛮有用的,不至于加载一堆体积庞大的第三方库,今天笔者用本文归纳一下分...

17420
来自专栏趣谈前端

9012教你如何使用gulp4开发项目脚手架

由于本文重点是介绍gulp4.0搭建脚手架的思路,相关插件的用法以及项目结构的设计,由于gulp的基本用法很简单,如果不熟悉可以移步官网自行研究学习。该脚手架的...

14910
来自专栏Java技术栈

牛逼哄哄的 Lambda 表达式,简洁优雅就是生产力!

https://www.zhihu.com/question/20125256/answer/324121308

9220
来自专栏开发杂记

log4j.properties 配置示例

2.将log4j.properties放入项目src路径下即可,虚拟机会自动加载日志配置文件,文件内容如下:

79740
来自专栏京程一灯

怎样编写更好的 JavaScript 代码[每日前端夜话0xA4]

我看到没有多少人谈论改进 JavaScript 代码的实用方法。以下是我用来编写更好的 JS 的一些顶级方法。

8330
来自专栏女程序员的日常_Lin

vue源码解读--Vitual DOM(虚拟DOM)

Virtual DOM产生的原因是浏览器中DOM是很“昂贵”的,我们来看一下一个p元素的属性都有哪些:

9240
来自专栏call_me_R

nginx处理跨域

最近从mac转成用window来开发,在安装nginx的时候碰了下钉子,那我就不开心了。想着既然都安装好了,那么就搞点事情吧~

51420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励