React-router 介绍

路由简介

路由是干什么的？
根据不同的 url 地址展示不同的内容或页面。
单页面应用最大的特点就是只有一个 web 页面。因而所有的页面跳转都需要通过javascript实现。当需要根据用户操作展示不同的页面时，我们就需要根据访问路径使用js控制页面展示内容。

React-router 简介

React Router 是专为 React 设计的路由解决方案。它利用HTML5 的history API，来操作浏览器的 session history (会话历史)。

使用

React Router被拆分成四个包：react-router，react-router-dom，react-router-native和react-router-config。react-router提供核心的路由组件与函数。react-router-config用来配置静态路由（还在开发中），其余两个则提供了运行环境（浏览器与react-native）所需的特定组件。

进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。因为react-router-dom已经暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。

相关组件

1. <BrowserRouter>
   使用了 HTML5 的 history API (pushState, replaceState and the popstate event) 用于保证你的地址栏信息与界面保持一致。
   主要属性:
   basename：设置根路径
   getUserConfirmation：获取用户确认的函数
   forceRefresh：是否刷新整个页面
   keyLength：location.key的长度
   children：子节点（单个）

2. <HashRouter>
   为旧版本浏览器开发的组件，通常简易使用BrowserRouter。

3. <Link>
   为项目提供声明性的、可访问的导航
   主要属性:
   to：可以是一个字符串表示目标路径，也可以是一个对象，包含四个属性：

      pathname:表示指向的目标路径
      search: 传递的搜索参数
      hash:路径的hash值 
      state: 地址状态
   

   replace：是否替换整个历史栈
   innerRef：访问部件的底层引用
   同时支持所有a标签的属性例如className，title等等

4. <Route>
   React-router 中最重要的组件，最主要的职责就是根据匹配的路径渲染指定的组件
   主要属性:
   path：需要匹配的路径
   component：需要渲染的组件
   render：渲染组件的函数
   children ：渲染组件的函数，常用在path无法匹配时呈现的’空’状态即所谓的默认显示状态

5. <Redirect>
   重定向组件
   主要属性: to:指向的路径

6. <Switch>
   嵌套组件：唯一的渲染匹配路径的第一个子 <Route> 或者 <Redirect>