React学习（三）——Router路由的使用和页面跳转

    大家好，我是凯文，本篇文章内容是关于React框架中的路由“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，文章链接如下：

    凯文的React组件和数据传递讲解：  https://blog.csdn.net/daxiazouyizou/article/details/79748078

    那么，在一张页面中，我们该如何去实现页面跳转呢。Router就提供了页面跳转渲染的方法，React应用会根据链接地址去决定要渲染的内容。也就是说，链接地址不再是用于直接跳转，而是告诉React，我需要怎么样的内容，让React进行渲染。

    通俗来讲，就像去采购东西，我给你一张清单，你按照清单上的内容去获取相应的物件。

    下面就直接通过实例来介绍React中Router的用法。

    首先，我们打开已经构建完成的React项目目录，本人采用的是VScode编辑器

    （构建方法可以参照凯文的React项目搭建：https://blog.csdn.net/daxiazouyizou/article/details/79743832）

    我们删去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