reactrouter4路由钩子_React-Router4.x中文文档

近期困扰于SPA在ios微信调用分享SDK失败的问题， 目前采用拿掉react-router路由，采用原始location.href的方式跳转，临时解决问题...

坑终究是坑，不填不足以平民愤...

这时候才发现react-router的升级至4.x，相比之前，多有不同之处，废话不多说，先搞个API整体的摸索一番。

对以上问题感兴趣的，欢迎交流 ^_^

重点分割线

具体栗子参见：https://github.com/git-zhangsan/react-router4#readme(持续更新中)

以下为翻译的中文API(水平有限，凑合看，欢迎纠正补充~)

使用HTML5历史记录API(pushState，replaceState和popstate事件)的来保持您的UI与URL同步。

Code:

`

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

basename={optionalString}

forceRefresh={optionalBool}

getUserConfirmation={optionalFunc}

keyLength={optionalNumber}>

`

属性：

- basename: string

所有locations的基本URL。如果应用程序从服务器上的子目录提供，则需要将其设置为子目录。正确格式的基础名称应该有一个主要的斜杠，但没有尾部斜线。

`

// renders

`

- getUserConfirmation: func

用于确认导航的功能。默认使用window.confirm。

`

//this is the default behavior

const getConfirmation = (message, callback) =>{

const allowTransition=window.confirm(message)

callback(allowTransition)

}

`

- forceRefresh: bool

如果为true，则路由器将在页面导航中使用全页刷新。您可能只想在不支持HTML5历史记录API的浏览器中使用此功能。

`

const supportsHistory = 'pushState' inwindow.history

`

- keyLength: number

location.key的长度。默认为6。

`

`

- children: node

要呈现的单个子元素。

使用URL的哈希部分(即window.location.hash)的来保持您的UI与URL同步。

重要的提示：Hash history不支持location.key或location.state。在以前的版本中，我们试图减少行为，但是有一些边缘案例我们无法解决。

任何需要此行为的代码或插件将无法正常工作。由于此技术仅用于支持旧版浏览器，因此我们建议您将服务器配置为使用。

`

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

`

- basename: string

所有locations的基本URL。正确格式的基础名称应该有一个主要的斜杠，但没有尾部斜线。

`

// renders

`

- getUserConfirmation: func

用于确认导航的功能。默认使用window.confirm。

`

//this is the default behavior

const getConfirmation = (message, callback) =>{

const allowTransition=window.confirm(message)

callback(allowTransition)

}

`

- hashType: string

用于window.location.hash的编码类型。可用值为：

"slash": 创建一个hash值，例如：#/ and #/sunshine/lollipops

"noslash": 创建一个hash值，例如：# and #sunshine/lollipops

”hashbang“: 创建一个”ajax crawlable” (已被谷歌弃用) 例如：#!/ and #!/sunshine/lollipops

默认值"slash"

- children: node

要呈现的单个子元素。

在应用程序范围提供声明性，可访问的导航

`

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

About

`

- to: string

链接到的路径名或位置。

`

`

- to: object

要链接的位置。

`

pathname:'/courses',

search:'?sort=name',

hash:'#the-hash',

state: { fromDashboard:true}

}}/>

`

- replace: bool

如果为true，单击链接将替换历史堆栈中的当前条目，而不是添加新条目。

`

`

一种特殊版本的，当与当前URL匹配时，将向渲染元素添加样式属性。

`

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

About

`

- activeClassName: string

当活动时给出元素的类。默认给定类是活动的。这将与className支持相结合。

`

to="/faq"activeClassName="selected"

>FAQs

`

- activeStyle: object

当元素处于活动状态时应用于元素的样式。

`

to="/faq"activeStyle={{

fontWeight:'bold',

color:'red'}}>FAQs

`

- exact: bool

当为true时，仅当位置匹配完全时才会应用活动类/样式。

`

exact

to="/profile"

>Profile

`

- strict: bool

当为真时，在确定位置是否与当前网址匹配时，将考虑位置路径名上的尾部斜线。

有关详细信息，请参阅文档。(https://reacttraining.com/core/api/Route/strict-bool)

`

strict

to="/events/"

>Events

`

- isActive: func

增加用于确定链接是否活动的额外逻辑的功能。如果您想要更多地验证链接的路径名与当前URL的路径名匹配，则应该使用这一点。

`

//只有当事件ID为奇数时，才考虑事件有效

const oddEvent = (match, location) =>{if (!match) {return false}

const eventID=parseInt(match.params.eventID)return !isNaN(eventID) && eventID % 2 === 1}

to="/events/123"isActive={oddEvent}>Event 123

`

- location: object

isActive比较当前的历史位置(通常是当前的浏览器URL)。要与其他位置进行比较，可以传递一个位置。

https://reacttraining.com/core/api/Prompt

将“URL”的历史记录保存在内存中(不读取或写入地址栏)的。在测试和非浏览器环境(如React Native)中很有用

`

import { MemoryRouter } from 'react-router'

`

- initialEntries: array

历史堆栈中的一系列位置。这些可能是具有{pathname，search，hash，state}或简单字符串URL的完整的位置对象。

`

initialEntries={[ '/one', '/two', { pathname: '/three'} ]}

initialIndex={1}>

`

- initialIndex: number

initialEntries数组中的初始位置索引。

- getUserConfirmation: func

用于确认导航的功能。当使用直接使用时，必须使用此选项。

- keyLength: number

location.key的长度。默认为6

`

`

- children: node

要呈现的单个子元素。

渲染将导航到新位置。新位置将覆盖历史堆栈中的当前位置，如服务器端重定向(HTTP 3xx)。

`

import { Route, Redirect } from 'react-router'

(

loggedIn?(

) : (

)

)}/>

`

- to: string

要重定向到的网址。

`

`

- to: object

要重定向到的位置。

`

pathname:'/login',

search:'?utm=your+face',

state: { referrer: currentLocation }

}}/>

`

- push: bool

当为true时，重定向会将新条目推入历史记录，而不是替换当前条目。

`

`

- from: string

要重定向的路径名。这只能用于在内部呈现时匹配位置。

有关详细信息，请参阅。https://reacttraining.com/web/api/Switch/children-node

`

`

路由组件可能是React Router中了解和学习使用的最重要的组件。其最基本的责任是在位置与路线的路径匹配时呈现一些UI。

`

import { BrowserRouter as Router, Route } from 'react-router-dom'