React-Router 是React绿色生态里边很重要的一个环节，如今React的单页应用的路由器基本上全是前面自身管理方法的，而并不像之前是后端开发路由器，React管理方法路由器的库常见的就是 React-Router 。
文中想写一下下 React-Router 的应用，可是光详细介绍API又太平平淡淡了，并且官方网文本文档早已写得很好啦，我这里就用一个普遍的开发设计情景讨论一下 React-Router 是如何使用的吧。
而大家通常的系统软件都是会有客户访问限制的限制，一些网页页面很有可能必须客户具备一定的管理权限才可以浏览。
文中便是用 React-Router来完成1个前面身份验证实体模型。
运用实例
要完成的作用是大伙儿常常碰到的情景，便是要操纵有所不同的客户人物角色来浏览有所不同的网页页面，这儿一共有4个网页页面：
/value
/login
/backEnd
/user
此外得有3种人物角色：
.未登录客户 ：只有浏览首页 /value 和登录页 /login
.单用户 ：能够浏览首页 /value ，登录页 /login 和后台管理网页页面 /backEnd
引进React-Router
大家网页页面先写通俗一点，先写个文章标题吧，例如那样：
importReactfrom'react'。
functionAdmin(){。
return(。
管理人员网页页面。
复制代码。
别的好多个网页页面也是相近的。
随后大家就可以在 App软件.js 里边引进 React-Router 做路由跳转了，留意我们在电脑浏览器上应用的是 react-router-dom ，新版本的 React-Router 将关键逻辑性层和展现层分离了，关键逻辑性会解决路由器配对等，展现层会解决具体的自动跳转和路由转变的监视，往往那么分，是由于React-Router不仅必须适用电脑浏览器，还必须适用ReactNative，这两个服务平台的监视和自动跳转是有所不同的。
因此如今React-Router下边有很多包了：
react-router ：关键逻辑性解决，出示一些公共的基类。
react-router-dom ：实际完成电脑浏览器有关的路由器监视和自动跳转。
react-router-native ：实际完成RN有关的路由器监视和自动跳转。
在具体应用时，大家通常不用引入 react-router ，只是立即用 react-router-dom 就可以了，因为它自身会去引入 react-router 。
下边我们在新项目里边引进 react-router-dom 。
importReactfrom'react';
import{
BrowserRouterasRouter,
Switch,
Route,
}from"react-router-dom";
importHomefrom'./pages/Home';
importLoginfrom'./pages/Login';
importBackEndfrom'./pages/BackEnd';
importAdminfrom'./pages/Admin';
functionApp软件(){
return(
);
}
exportdefaultApp软件。
复制代码
随后能够在 Home 网页页面用 Link 再加上自动跳转到别的网页页面的连接，那样就可以自动跳转了：
importReactfrom'react';
import{Link}from'react-router-dom';
functionHome(){
return(
<>
主页
登陆
后台管理
管理人员
);
}
exportdefaultHome;
复制代码
到现在大家的运用运作起來是那样的：
