react-router 中的history

react-router 是建立在history之上的；我们来谈谈这个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.pathname

search        同window.location.search

state         一个捆绑在这个地址上的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'))

秒客网

react-router 中的history（react中关于后退键的处理用的到）