React-Router4.x中⽂⽂档
以下为翻译的中⽂API（⽔平有限，凑合看，欢迎纠正补充~）
<BrowserRouter>
使⽤HTML5历史记录API（pushState，replaceState和popstate事件）的<Router>来保持您的UI与URL同步。
Code:
`
import { BrowserRouter } from 'react-router-dom'
<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App/>
</BrowserRouter>
`
属性：
- basename: string
所有locations的基本URL。如果应⽤程序从服务器上的⼦⽬录提供，则需要将其设置为⼦⽬录。正确格式的基础名称应该有⼀个主要的斜杠，但没有尾部斜线。
`
<BrowserRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="/calendar/today">
`
- getUserConfirmation: func
⽤于确认导航的功能。默认使⽤firm。
`
// this is the default behavior
const getConfirmation = (message, callback) => {
const allowTransition = firm(message)
callback(allowTransition)
}
<BrowserRouter getUserConfirmation={getConfirmation}/>
`
-
forceRefresh: bool
如果为true，则路由器将在页⾯导航中使⽤全页刷新。您可能只想在不⽀持HTML5历史记录API的浏览器中使⽤此功能。
`
const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>
`
- keyLength: number
location.key的长度。默认为6。
`
<BrowserRouter keyLength={12}/>
`
- children: node
要呈现的单个⼦元素。
<HashRouter>
使⽤URL的哈希部分（即window.location.hash）的<Router>来保持您的UI与URL同步。
重要的提⽰：Hash history不⽀持location.key或location.state。在以前的版本中，我们试图减少⾏为，但是有⼀些边缘案例我们⽆法解决。任何需要此⾏为的代码或插件将⽆法正常⼯作。由于此技术仅⽤于⽀持旧版浏览器，因此我们建议您将服务器配置为使⽤
<BrowserHistory>。
`
import { HashRouter } from 'react-router-dom'
<HashRouter>
<App/>
</HashRouter>
`
- basename: string
所有locations的基本URL。正确格式的基础名称应该有⼀个主要的斜杠，但没有尾部斜线。
`
<HashRouter basename="/calendar"/>
<Link to="/today"/> // renders <a href="#/calendar/today">
`
- getUserConfirmation: func
⽤于确认导航的功能。默认使⽤firm。
`
/
/ this is the default behavior
const getConfirmation = (message, callback) => {
const allowTransition = firm(message)
callback(allowTransition)
}
<HashRouter getUserConfirmation={getConfirmation}/>
`
- hashType: string
⽤于window.location.hash的编码类型。可⽤值为：
"slash": 创建⼀个hash值，例如：#/ and #/sunshine/lollipops
"noslash": 创建⼀个hash值，例如：# and #sunshine/lollipops
”hashbang“: 创建⼀个”ajax crawlable” (已被⾕歌弃⽤) 例如：#!/ and #!/sunshine/lollipops
默认值"slash"
- children: node
要呈现的单个⼦元素。
<Link>
在应⽤程序范围提供声明性，可访问的导航
`
import { Link } from 'react-router-dom'
<Link to="/about">About</Link>
`
- to: string
链接到的路径名或位置。
`
<Link to="/courses"/>
`
- to: object
要链接的位置。
`
<Link to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
`
- replace: bool
如果为true，单击链接将替换历史堆栈中的当前条⽬，⽽不是添加新条⽬。
`
<Link to="/courses" replace />
`
<NavLink>
⼀种特殊版本的<Link>，当与当前URL匹配时，将向渲染元素添加样式属性。`
import { NavLink } from 'react-router-dom'
<NavLink to="/about">About</NavLink>
`
- activeClassName: string
当活动时给出元素的类。默认给定类是活动的。这将与className⽀持相结合。`
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink>
`
- activeStyle: object
当元素处于活动状态时应⽤于元素的样式。
`
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs</NavLink>
`
- exact: bool
当为true时，仅当位置匹配完全时才会应⽤活动类/样式。
`
<NavLink
exact
to="/profile"
>Profile</NavLink>
`
- strict: bool
当为真时，在确定位置是否与当前⽹址匹配时，将考虑位置路径名上的尾部斜线。
有关详细信息，请参阅<Route strict>⽂档。(reacttraining/core/api/Route/strict-bool)
`
<NavLink
strict
to="/events/"
>Events</NavLink>
`
- isActive: func
增加⽤于确定链接是否活动的额外逻辑的功能。如果您想要更多地验证链接的路径名与当前URL的路径名匹配，则应该使⽤这⼀点。`
// 只有当事件ID为奇数时，才考虑事件有效
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink>
`
- location: object
isActive⽐较当前的历史位置（通常是当前的浏览器URL）。要与其他位置进⾏⽐较，可以传递⼀个位置。
<Prompt>
reacttraining/core/api/Prompt
<MemoryRouter>
将“URL”的历史记录保存在内存中（不读取或写⼊地址栏）的<；路由器>。在测试和⾮浏览器环境（如React Native）中很有⽤
`
import { MemoryRouter } from 'react-router'
<MemoryRouter>
react router v5</MemoryRouter>
`
- initialEntries: array
历史堆栈中的⼀系列位置。这些可能是具有{pathname，search，hash，state}或简单字符串URL的完整的位置对象。`
<MemoryRouter
initialEntries={[ '/one', '/two', { pathname: '/three' } ]}
initialIndex={1}
>
<App/>
</MemoryRouter>
`
- initialIndex: number
initialEntries数组中的初始位置索引。
- getUserConfirmation: func
⽤于确认导航的功能。当使⽤<MemoryRouter>直接使⽤<Prompt>时，必须使⽤此选项。
- keyLength: number
location.key的长度。默认为6
`
<MemoryRouter keyLength={12}/>
`
- children: node
要呈现的单个⼦元素。
<Redirect>
渲染<Redirect>将导航到新位置。新位置将覆盖历史堆栈中的当前位置，如服务器端重定向（HTTP 3xx）。
`
import { Route, Redirect } from 'react-router'
<Route exact path="/" render={() => (
loggedIn ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
`
- to: string
要重定向到的⽹址。
`
<Redirect to="/somewhere/else"/>
`
- to: object
要重定向到的位置。
`
<Redirect to={{