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()的内容,其只能是一个子节点,当然了,里面可以嵌套多个

猜你喜欢

转载自blog.csdn.net/XUAN_1995/article/details/84337154