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