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


常用的 history 有三种形式



browserHistory

创建一个像example.com/some/path这样真实的 URL

每一个 web 应用都应该渴望使用 browserHistory

1、比较真实的URL

2browserHistory 其实使用的是 HTML5  History API,浏览器提供相应的接口来修改浏览器的历史记录;而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录

3History API 提供了 pushState() replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法,所以并没有替换历史记录的功能。但 react-router 通过 polyfill 实现了此功能,具体实现没有看,好像是使用 sessionStorage

4、有些应该会忽略 URL 中的 hash 部分,记得之前将 URL 使用微信分享时会丢失 hash 部分


服务器配置坑

express

const express = require('express')

const path = require('path')

const port = process.env.PORT || 8080

const app = express()


// 通常用于加载静态资源

app.use(express.static(__dirname + '/public'))


// 在你应用 JavaScript 文件中包含了一个 script 标签

// index.html 中处理任何一个 route

app.get('*', function (request, response){

  response.sendFile(path.resolve(__dirname, 'public', 'index.html'))

})

app.listen(port)


nginx

location / {

  try_files $uri $uri/ /index.html;

}


Apache

创建一个.htaccess文件在你的文件根目录下:

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

</IfModule>


hashHistory

Hash history 使用 URL 中的 hash#)部分去创建形如 example.com/#/some/path 的路由。