react-router中的history（react中关于后退键的处理⽤的到）
react-router 中的history
react-router 是建⽴在history之上的；我们来谈谈这个history吧。
github:
history ⼀个管理js应⽤session会话历史的js库。它将不同环境（浏览器，）的变量统⼀成了⼀个简易的API来管理历史堆栈、导航、确认跳转、以及sessions间的持续状
态。
//基本使⽤import { createHistory } from 'history'const history = createHistory()// 当前的地址const location = CurrentLocation()// 监听当前的地址变换const unlisten = history.listen(location => {console.log(location.pathname
你也可以使⽤ 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
Hash history 是默认的，因为它可以在服务器中不作任何配置就可以运⾏，并且它在全部常⽤的浏览器包括 IE8+ 都可以⽤。但是我们不推荐在实际⽣产中⽤到它，因为每⼀个
web 应⽤都应该有⽬的地去使⽤createBrowserHistory。
createBrowserHistory
Browser history 是由 React Router 创建浏览器应⽤推荐的 history。它使⽤  API 在浏览器中被创建⽤于处理 URL，新建⼀个像这样真实的`URL example/some/path`
服务器配置
⾸先服务器应该能够处理 URL 请求。处理应⽤启动最初的 / 这样的请求应该没问题，但当⽤户来回跳转并在 /accounts/123 刷新时，服务器就会收到来⾃ /accounts/123 的请
求，这时你需要处理这个 URL 并在响应中包含 JavaScript 程序代码。
⼀个 express 的应⽤可能看起来像这样的：
const express = require('express')const path = require('path')const port = v.PORT || 8080const app = express()// 通常⽤于加载静态资源app.use(express.static(__dirname + '/public'))// 在你应⽤ JavaScript ⽂件中包含了⼀个 script 标签如果你的服务器是 nginx，请使⽤：
server {
...
location / {
try_files $uri /index.html
}
}
当在服务器上不到其他⽂件时，这就会让 nginx 服务器⽣成静态⽂件和操作 index.html ⽂件。
createMemoryHistoryreact router拦截
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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。