使用react-router

React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分为：

• 1.react-router 核心组件
• 2.react-router-dom 应用于浏览器端的路由库（单独使用包含了react-router的核心部分）
• 3.react-router-native 应用于native端的路由
  React-router官方文档地址： https://reacttraining.com/react-router/web/guides/philosophy

安装react-router

1.   npm install react-router-dom --save     //或者使用yarn 进行安装
2.   yarn add react-router-dom

路由的基本概念

• 在react-router中万物皆是组件，没有在Vue中的路由配置，全是组件。ReactRouter中提供了以下三大组件：
  • Router是所有路由组件共用的底层接口组件，它是路由规则制定的最外层的容器。
  • Route路由规则匹配，并显示当前的规则对应的组件。
  • Link路由跳转的组件
    当然每个组件下又会有几种不同的子类组件实现。比如： Router组件就针对不同功能和平台对应用：
    <BrowserRouter> 浏览器的路由组件
    <HashRouter> URL格式为Hash路由组件
    <MemoryRouter> 内存路由组件
    <NativeRouter> Native的路由组件
    <StaticRouter> 地址不改变的静态路由组件

React-router 接收路由参数

• 一、占位符传递参数

// 1. 如果是在静态组件中使用  ----> props.match.params.id 
// 2. 如果是在UI组件中使用  ---->  this.props.match.params.id 
const About = (props) => (
  <div>
    <h2>About{props.match.params.id}</h2>
  </div>
)
<Route path="/about/:id" component={About}></Route> //定义路由表
<Link to="/About/10">About</Link>  // 通过link标签进行传递params进行传递参数

• 二、通过类似URL进行传递参数

//在这种参数传递中，不能精确定位到传递的参数，需要进行处理 
const Product = (props) => (
  <div>
    <h2>Product{ props.location.search }</h2> //此时得到的结果是?id=20 所以需要处理
  </div>
)
//定义路由map
<Route path="/product" component={Product}></Route>
//传递参数
<Link to="/Product/?id=20">Product</Link> 

import导入的三种模式

import React from 'react' 只导入 是 React。而
import * as React from 'react' 导出所有，并命名为 React。而
import hash as Router from 'react' 导出hash，并命名为 Router。

BrowserRoute组件的使用

• 利用BrowserRouer 后再地址栏不会 出现了哈希#

import * as React from 'react';  //导出所有命名为React
import * as ReactDOM from 'react-dom';  //导出所有命名为ReactDOM
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,  document.body);

BrowserRouter组件提供了四个属性。

• 1.basename: 字符串类型，路由器的默认根路径 , 如果你的环境是在基于URL里面的，而环境部署在二级目录下，这个是时候就需要basename

<BrowserRouter basename="/admin"/>
    <Link to="/home"/> // 被渲染为 <a href="/admin/home">
</BrowserRouter>

• 2.forceRefresh: 布尔类型，在导航的过程中整个页面是否刷新
• 3.getUserConfirmation: 函数类型，当导航需要确认时执行的函数。默认是：window.confirm
• 4.keyLength: 数字类型location.key 的长度。默认是 6

HashRouter

HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。

hashType: string

window.location.hash 使用的 hash 类型。有如下几种：

• "slash" - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops
• "noslash" - 后面没有斜杠，例如 # 和 #sunshine/lollipops
• "hashbang" - Google 风格的 "ajax crawlable"，例如 #!/ 和 #!/sunshine/lollipops

默认为 "slash"

路由跳转

除了可以通过Link标签还可以通过函数进行跳转

//在静态组件中
props.history.push('detail')   ---> 这里的detail代表的是跳转的路径，比如跳转到根路径就是`/`
//在UI组件组件中使用
this.props.history.push('detail')   ---->在UI组件中使用的适合静态组件中是以严格，只是在UI组件中要使用this关键字

UI组件

UI 组件有以下几个特征。

• 1.只负责 UI 的呈现，不带有任何业务逻辑
• 2.没有状态（即不使用this.state这个变量）
• 3.所有数据都由参数（this.props）提供