import { BrowserRouter } from 'react-router-dom';
- basename--所有位置的基准 URL。如果你的应用程序部署在服务器的子目录，则需要将其设置为子目录。basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠。
- forceRefresh--如果为 true ，在导航的过程中整个页面将会刷新。一般情况下，只有在不支持 HTML5 history API 的浏览器中使用此功能。
- getUserConfirmation--用于确认导航的函数，默认使用 window.confirm。例如，当从
/a导航至/b时，会使用默认的confirm函数弹出一个提示，用户点击确定后才进行导航，否则不做任何处理。译注：需要配合 - keyLength--location.key 的长度，默认为 6。
import { HashRouter } from 'react-router-dom';
1）. basename--所有位置的基准 URL。basename 的正确格式是前面有一个前导斜杠，但不能有尾部斜杠。
上例中的 最终将被呈现为：
2）. getUserConfirmation: func--用于确认导航的函数，默认使用 [window.confirm]
3）. hashType: string
window.location.hash 使用的 hash 类型，有如下几种：
slash - 后面跟一个斜杠，例如 #/ 和 #/sunshine/lollipops--默认
noslash - 后面没有斜杠，例如 # 和 #sunshine/lollipops
hashbang - Google 风格的 [ajax crawlable]，例如 #!/ 和 #!/sunshine/lollipops
注意
该技术仅用于支持旧式（低版本）浏览器，因此对于一些新式浏览器，我们鼓励你使用
在其 path 属性与某个 [location]匹配时呈现一些 UI。
所有 Router 组件的通用低阶接口。通常情况下，应用程序只会使用其中一个高阶 Router。使用低阶
有一个属性是history，表示网页历史记录。
为你的应用提供声明式的、可访问的导航链接。
to--字符串形式链接地址，通过 pathname、search 和 hash 属性创建。
或对象形式链接地址，pathneme、search、hash和state
replace--true点击链接时替换，false时添加
innerRef--函数。允许访问组件的底层引用。
会在与当前 URL 匹配时为其呈现元素添加样式属性。如className="active"
exact--如果为 true，则只有在位置完全匹配时才应用激活类/样式。
使用
注意：
以上“根据匹配参数进行重定向”的示例存在bug，没有效果。to 中的 :id 并不会继承 from 中的 :id 匹配的值，而是直接作为字符串显示到浏览器地址栏
用于渲染与路径匹配的第一个子
用于匹配子元素而不是当前历史位置（通常是当前的浏览器 URL）的 [location]对象。
所有
当在
如果给
history
history 指的是 [history] 包，它是 React Router 的两个主要依赖之一（除了 React 本身），并且提供了几种不同的实现方式，用于在各种环境中管理 JavaScript 中的会话历史。
history 对象通常具有以下属性和方法：
-
length- number 历史堆栈中的条目数 -
action- string 当前的导航操作（push、replace或pop） -
location- object 当前访问的位置信息，可能具有以下属性：-
pathname- string URL 路径 -
search- string URL 中的查询字符串 -
hash- string URL 中的 hash 片段 -
state- object 存储至location中的额外状态数据，仅在browser history和memory history中有效。
-
-
push(path, [state])- function 将一个新条目推入到历史堆栈中 -
replace(path, [state])- function 替换历史堆栈中的当前条目 -
go(n)- function 将历史堆栈中的指针移动 n 个条目 -
goBack()- function 返回到上一个页面，相当于 go(-1) -
goForward()- function 进入到下一个页面，相当于 go(1) -
block(prompt)- function 阻止导航（请参阅 history 文档）
注意：history 对象是可变的。因此建议从渲染组件时接收的属性中直接访问 location，而不是通过 history.location 进行访问。这样可以保证 React 在生命周期中的钩子函数正常执行。
location
location 代表应用程序的位置。如当前的位置，将要去的位置，或是之前所在的位置。它看起来像这样：
{
key: 'ac3df4', // 使用 hash history 时，没有这个属性
pathname: '/somewhere'
search: '?some=search-string',
hash: '#howdy',
state: {
[userDefined]: true
}
}
Router 将在以下几个地方为您提供一个 location 对象：
在 Route component 中，以 this.props.location 方式获取
在 Route render 中，以 ({ location }) => () 方式获取
在 Route children 中，以 ({ location }) => () 方式获取
在 withRouter 中，以 this.props.location 方式获取
location 对象永远不会发生改变，因此可以在生命周期钩子函数中使用 location 对象来查看当前访问地址是否发生改变。这种技巧在获取远程数据以及使用动画时非常有用。
最终，location 将传递给以下组件：
- Route
- Switch
这将阻止它们在 Router 状态下使用实际位置。这对动画和等待导航非常有用，或者任何时候你想诱导一个组件在不同于真实位置的地方渲染。
match
一个 match 对象包含有关
params - object 根据 path 中指定的动态片段，从 URL 中解析出的键值对
isExact - boolean 如果整个 URL 匹配（不包含尾随字符），则为 true
path - string 用于匹配的路径模式。可用于构建嵌套的
url - string URL 的匹配部分。可用于构建嵌套的
您可以在以下几个地方访问 match 对象：
在 Route component 中，以 this.props.match 方式获取
在 Route render 中，以 ({ match }) => () 方式获取
在 Route children 中，以 ({ match }) => () 方式获取
在 withRouter 中，以 this.props.match 方式获取
matchPath 的返回值
如果
使用Route 会自动在props方法中添加许多东西，以便调用，没有使用Route的使用 withRouter（组件名）之后，就能调用没有添加的东西
react loadable
安装：
引入：
import Loadable from 'react-loadable';
import Loading from './Loading';
使用：分片打包，按需加载
优点：
基于import()的自动代码拆分
避免组件加载闪烁
预加载
说了这么多，是时候上项目了：
利用路由实现跳转页面及页面中的元素跳转页面
- 新建一个react项目
- 安装配件
cnpm i react-router-dom react-loadable -S -
项目目录：
image.png
(1)/src/app.css
(2)/src/index.js
(3)/src/App.js
(4)/src/routes
(5)/src/component/BackButton/index.js
(6)/src/compoment/index.js
(7)/src/pages/Home/index.js
(8)/src/pages/Mall/index.js
(9)/src/pages/About/index.js
(10)/src/pages/Detail/index.js
(11)/src/pages/index.js