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'
reactrouter4路由钩子_React-Router4.x中文文档相关推荐
- reactrouter4路由钩子_react router @4 和 vue路由 详解(八)vue路由守卫
13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据from和to来判断是哪个路由触发) const router = new VueRouter({ ... }) ...
- Spring Cloud Dalston.RELEASE中文文档
Spring Cloud Dalston.RELEASE中文文档 Spring Cloud 目录 特性 云原生应用程序 Spring Cloud上下文:应用程序上下文服务 引导应用程序上下文 应用程序 ...
- Ocelot中文文档-缓存
Ocelot中文文档-缓存 原文:Ocelot中文文档-缓存 目前Ocelot使用CacheManager项目提供了一些非常基本的缓存.这是一个了不起的项目,它解决了很多缓存问题. 我会推荐这个软件包 ...
- ASP.NET Core 中文文档 第三章 原理(5)错误处理
原文:Error Handling 作者:Steve Smith 翻译:谢炀(Kiler) 校对:高嵩(jack2gs).何镇汐 当你的ASP.NET应用发生错误的时候, 你可以采用本文所述的各种方法 ...
- swift中文文档_Flutter 中文文档:使用 Packages
Flutter 支持使用其他开发者向 Flutter 和 Dart 生态系统贡献的共享 package,这意味着你可以快速构建应用而不是一切从零开始. 现有的 package 支持许多使用场景,例如, ...
- flask中文文档_「Flask系列」 初识Flask
引子 作者有多年的编程打杂经验,之前一直参与基于Java的各种项目以及产品规划与设计,后因自己创业维持一家小公司,有些项目与产品,想降低开发成本,故在公司内部推行基于Python Flask的后端开发 ...
- Spring Boot中文文档
1.5.2.RELEASE Part I. Spring Boot 文档 本节简要介绍了Spring Boot文档,是整个文档的参考指南. 您可以完整阅读本参考指南,或者如果您不感兴趣的话可以跳过该部 ...
- Babel 是什么?· Babel 中文文档
Babel 是一个 JavaScript 编译器 Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧 ...
- OkHttp 官方中文文档
OkHttp官方中文文档 本文结构 Calls Connections Recipes Interceptors HTTPS 本文翻译来自 官方OkHttp Wiki OkHttp官方中文文档 一Ca ...
- kafka中文文档(0.10.0)
kafka中文文档(0.10.0) 作者:链上研发-老杨叔叔 时间:2016-07-22 版本:Apache Kafka 0.10.0 (2016年5月底发布) .目录 kafka中文文档0100 目 ...
最新文章
- Spring Boot 2.x基础教程:使用Spring Data JPA访问MySQL
- Zoj 3201 Tree of Tree
- 4016-二叉排序树的判定(C++,附思路)
- 给定一个正整数,计算有多少对质数的和等于输入的这个正整数
- Eclipse maven工程 Missing artifact com.sun:tools:jar:1.7.0:system 解决方法
- SoundMorph Dust for Mac(双耳环绕音频颗粒合成仪)
- Java实验报告2021
- android 模拟 ns手柄,Joy-Con Droid可将Android智能机变身为任天堂Switch的手柄
- 【Arduino 项目篇】智能窗户控制系统(附录:简单红绿灯制作)
- html 超链接 中文转码,html和Url转码与解码
- 台式计算机用手机流量上网,台式机如何使用手机流量上网
- rails分页(kaminari)
- jasypt加密敏感配置信息出现Encryption raised an exception
- xaxis python_Python中的分组Xaxis可变性图
- 江苏赛区|2021年数学建模国赛江苏赛区获奖名单
- MATLAB下机器人可视化与控制---simulink篇(1)
- 大学计算机基础方案一,《大学计算机基础》实验实施方案-学生用(7页)-原创力文档...
- 出走的门徒之四:丰元创投朱会灿:冒险的牧师
- 镜头camera shot
- 矩阵初等变换的“打洞技巧”与“分块矩阵的行列式公式”