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、Page一、Page二、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组件。

    关于Page二、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相关文章，感谢各位支持。