简单谈谈React中的路由系统-创新互联

React中的路由系统

提起路由，首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则，程序运行时就能自动根据我们输入的URL来返回相对应的页面。前端中的路由与之类似，前端中的路由是根据你定义的路由规则来渲染不同的页面/组件，同时也会更新地址栏的URL。本篇文章要介绍的是React中经常使用到的路由，react-router主要使用HTML5的history API来同步你的UI和URL。

react-router的最新版本是v4.1.1，由于4.0版本和之间的版本API变化较大，所以本篇文章的内容并不能应用到之前的版本中。

要注意 react-router 有 react-router-dom 和 react-router-native 的区别。前者是用于开发WEB应用的，而后者适用于移动APP的，本文所介绍的是react-router-dom。

react-router 中的三大组件

react-router中的组件就是react中的组件，只不过它们被添加了一些特殊的逻辑而已。

Router Router相当于一个容器，不会被渲染出来。你的其他组件都要放在Router中才能使用到react-router的功能。根据功能的不同，Router还分为BrowserRouter，MemoryRouter等。

pnk pnk被渲染称一个a标签，通常以声明式的方式被定义在应用程序中。

Route Route包含一个path，并指明了在path与URL匹配时要渲染的组件。

Router

如果说我们的应用程序是一座小城的话，那么Route就是一座座带有门牌号的建筑物，而pnk就代表了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错Router就是这个老司机。

先来说一说BrowserRouter。BrowserRouter主要使用在浏览器中，也就是WEB应用中(废话，看名字就知道了)。它利用HTML5 的history API来同步URL和UI的变化。当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的Route，并将他们渲染出来。 既然BrowserRouter是用来管理我们的组件的，那么它当然要被放在最顶级的位置，而我们的应用程序的组件就作为它的一个子组件而存在。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
 
  
 ,
 document.body);

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。