react-router v4 API 翻译(一)

BrowserRouter

它是一种使用了HTML5的history API来记录你的路由历史。使得页面和浏览器的history保持一致

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter 
  basename={optionalString} 
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc} 
  keyLength={optionalNumber}>
  <App/>
</BrowserRouter>

参数：

• basename:string
  为所有位置添加一个基准URL，如果该应用被部署在服务器上的子目录上，那么就应当将basename的值设置为这服务器的子目录。正确的basename，反斜杠\应当在前面而不是在后面。

  <BrowserRouter basename="/calendar"/>
  <Link to="/today"/> // 等价于渲染了 <a href="/calendar/today">
  

• getUserConfirmation: func
  其值是一个函数，该函数被用来确认是否跳转，默认使用window.confirm
  (Window.confirm（）方法显示一个对话框，对话框里面的内容是message参数和确认、取消两个按钮。)

//这是默认行为
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

• forceRefresh: bool
  用来设置是否强制浏览器整体刷新，默认是false。一般在浏览器不支持 HTML5 的 history API 时使用

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

• keyLength: number
  location.key的长度。 默认为6。
  （key的作用：点击同一个链接时，每次该路径下的 location.key都会改变，可以通过 key 的变化来刷新页面。）

<BrowserRouter keyLength={12} />

• children: node
  渲染唯一子元素。作为一个 Reac t组件，天生自带 children 属性。也就是render（）的内容，其只能是一个子节点，当然了，里面可以嵌套多个