react-router 中的history(react中關於後退鍵的處理用的到)

react-router 中的historyhtml

react-router 是創建在history之上的;咱們來談談這個history吧。

github: mjackson/historynode

history 一個管理js應用session會話歷史的js庫。它將不一樣環境(瀏覽器,node...)的變量統一成了一個簡易的API來管理歷史堆棧、導航、確認跳轉、以及sessions間的持續狀態。react

//基本 使用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:nginx

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

一個 history 知道如何去監聽瀏覽器地址欄的變化, 並解析這個 URL 轉化爲 location 對象, 而後 router 使用它匹配到路由,最後正確地渲染對應的組件。git

location對象包括:github

pathname      同window.location.pathname
search        同window.location.search
state         一個捆綁在這個地址上的object對象
action        PUSH, REPLACE, 或者 POP中的一個
key           惟一ID

經常使用的三種historyweb

// 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 的路由。express

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'))
相關文章
相關標籤/搜索