[React Router v4] Use URL Parameters
URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.
<NavLink to="/demo" activeClassName={'active'}>Demo</NavLink>
Match:
<Route
path="/:page"
children={({match}) => {
console.log("match:", match)
const page = match.params.page;
return match && <h2>demo: {page} </h2>
}}></Route>
<NavLink to="/demo/react" activeClassName={'active'}>Demo</NavLink>
Match:
<Route
path="/:page/:sub"
children={({match}) => {
const page = match.params.page;
const sub = match.params.sub;
return match && <h2>demo: {page} -- {sub}</h2>
}}></Route>
<NavLink to="/demo-react" activeClassName={'active'}>Demo</NavLink>
Match:
<Route
path="/:page-:sub"
children={({match}) => {
const page = match.params.page;
const sub = match.params.sub;
return match && <h2>demo: {page} -- {sub}</h2>
}}></Route>
[React Router v4] Use URL Parameters的更多相关文章
- [React Router v4] Parse Query Parameters
React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- React Router V4发布
React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...
- [React Router v4] Redirect to Another Page
Overriding a browser's current location without breaking the back button or causing an infinite redi ...
- [React Router v4] Render Multiple Components for the Same Route
React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...
- [React Router v4] Render Catch-All Routes with the Switch Component
There are many cases where we will need a catch-all route in our web applications. This can include ...
- [React Router v4] Render Nested Routes
With React Router v4 the entire library is built as a series of React components. That means that cr ...
随机推荐
- 杭电1102 Constructing Roads
Constructing Roads Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- 几个经常使用的cmd命令
compmgmt.msc 计算机管理 devmgmt.msc 设备管理器 diskmgmt.msc 磁盘管理工具 dfrg.msc 磁盘碎片整理 eventvwr.msc 事件查看器 fsm ...
- 阿里一道Java并发面试题 (详细分析篇)
说明 前天分享了一篇关于阿里的"Java常见疑惑和陷阱"的文章,有人说这个很早就有了,可能我才注意到,看完之后发现内容非常不错,有几个我也是需要停顿下想想,如果后续有机会我录制一个 ...
- 15、python学习手册之:列表和字典
1.列表属于可变序列,支持在原处的修改 2.在标准python解锁器内部,列表就是C数组而不是链接结构 3.内置函数map对序列中的各项应用一个函数并把结果收集到一个新的列表中 eg:list(map ...
- SSH进阶(2)——用Struts拦截器实现登陆限制
拦截器从字面意思来看就是限制.限制用户訪问某些网页.在Action提出请求之前用拦截器来做权限设置,让符合的用户跳入对应的界面中.近期做的一个商城项目中就用到了自己定义的拦截器,实现了一个简单的ses ...
- 第一个Python程序(全面)
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一.Windows系统 1.编写Python程序方式之Sublime文本编辑器: 1>打开sublime,创建hello.p ...
- jmeter--响应断言
背景 在测试过程中,我们需要对某个请求的结果进行判定. 比如我们搜索“你好”,请求发送成功,返回响应码也是200,但是并不能说明返回的响应就是对的,我们可能还需要判定响应结果包含“你好”.这个时候,我 ...
- keytool用法总结
一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...
- OVS中对于用户层和datapath层的多个通道利用epoll进行控制
这里先临时记录下代码流程,有待完好. static int construct(struct ofproto *ofproto_) { struct ofproto_dpif *ofproto = o ...
- 大战C100K之-Linux内核调优篇--转载
原文地址:http://joyexpr.com/2013/11/22/c100k-4-kernel-tuning/ 早期的系统,系统资源包括CPU.内存等都是非常有限的,系统为了保持公平,默认要限制进 ...