react-router 中的history

react-router 是建立在history之上的；我们来谈谈这个history吧。

github: mjackson/history

history 一个管理js应用session会话历史的js库。它将不同环境（浏览器，node...）的变量统一成了一个简易的API来管理历史堆栈、导航、确认跳转、以及sessions间的持续状态。

//基本 使用import { createHistory } from 'history'const history = createHistory()// 当前的地址const location = history.getCurrentLocation()// 监听当前的地址变换const unlisten = history.listen(location => {  console.log(location.pathname)})// 将新入口放入历史堆栈history.push({  pathname: '/the/path',  search: '?a=query',  // 一些不存在url参数上面的当前url的状态值  state: { the: 'state' }})// When you're finished, stop the listenerunlisten()

你也可以使用 history对象来的方法来改变当前的location：

• push(location)
• replace(location)
• go(n)
• goBack()
• goForward()

一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。

location对象包括：

pathname      同window.location.pathnamesearch        同window.location.searchstate         一个捆绑在这个地址上的object对象action        PUSH, REPLACE, 或者 POP中的一个key           唯一ID

常用的三种history

// HTML5 history, 推荐import createHistory from 'history/lib/createBrowserHistory'// Hash historyimport createHistory from 'history/lib/createHashHistory'// 内存 history （如：node环境）import createHistory from 'history/lib/createMemoryHistory'

createHashHistory

这是一个你会获取到的默认 history ，如果你不指定某个 history （即 <Router>{/* your routes */}</Router>）。它用到的是 URL 中的 hash（#）部分去创建形如 http://example.com/#/some/path 的路由。

Hash history 是默认的，因为它可以在服务器中不作任何配置就可以运行，并且它在全部常用的浏览器包括 IE8+ 都可以用。但是我们不推荐在实际生产中用到它，因为每一个 web 应用都应该有目的地去使用createBrowserHistory。

createBrowserHistory

Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的`URL example.com/some/path`

服务器配置

首先服务器应该能够处理 URL 请求。处理应用启动最初的 / 这样的请求应该没问题，但当用户来回跳转并在 /accounts/123 刷新时，服务器就会收到来自 /accounts/123 的请求，这时你需要处理这个 URL 并在响应中包含 JavaScript 程序代码。

一个 express 的应用可能看起来像这样的：

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// 通常用于加载静态资源app.use(express.static(__dirname + '/public'))// 在你应用 JavaScript 文件中包含了一个 script 标签// 的 index.html 中处理任何一个 routeapp.get('*', function (request, response){  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

如果你的服务器是 nginx，请使用 try_files directive：

server {  ...  location / {    try_files $uri /index.html  }}

当在服务器上找不到其他文件时，这就会让 nginx 服务器生成静态文件和操作 index.html 文件。

createMemoryHistory

Memory history 不会在地址栏被操作或读取。这就解释了我们是如何实现服务器渲染的。同时它也非常适合测试和其他的渲染环境（像 React Native ）。

实现示例

import React from 'react'import createBrowserHistory from 'history/lib/createBrowserHistory'import { Router, Route, IndexRoute } from 'react-router'import App from '../components/App'import Home from '../components/Home'import About from '../components/About'import Features from '../components/Features'React.render(  <Router history={createBrowserHistory()}>    <Route path='/' component={App}>      <IndexRoute component={Home} />      <Route path='about' component={About} />      <Route path='features' component={Features} />    </Route>  </Router>,  document.getElementById('app'))