试着用React写项目-利用react-router解决跳转路由等问题(三)
转载请注明出处:王亟亟的大牛之路
本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink
和onlyActiveOnIndex
的一些问题
老习惯先安利一下:https://github.com/ddwhan0123/Useful-Open-Source-Android
例子的源码都传Git了,源码地址:https://github.com/ddwhan0123/ReactDemo
知识来源:https://github.com/reactjs/react-router-tutorial
前两天写了一些例子,包括普通跳转,嵌套,带参跳转等等,这一篇主要来实现一个常用功能 “回到首页“。
之前的例子里我们通过访问/来进入首页
- 1
- 1
但是其实我们Main.js这个页面他没有页面内容,我们一开始就进入了First.js
那么如何让我们的Main.js有内容呢?
可以使用IndexRoute
先来新建一个模拟的页面
Six.js
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
也就是刷出一句话
要让Main.js能显示内容需要2步
1在 Main.js里加入以下内容
- 1
- 1
实质上他让本来空空的根路径多了一个Six
组件
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
这还不够还需要在 First.js里做一些修改,如下
- 1
- 1
这使得<Six/>
成为了根路由的子组件,它成为父节点的this.props.children
内容理解有差异或者错误大街可以给我提,原文地址:https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes
接下来我们来提一下如何做一个返回页,最简单的方式是,写一个路由链过去,这很方便很简单,像这样
- 1
- 1
官方不推荐我们这么干,因为跳转根路由会丢失一些内容,诸如activeClassName,activeStyle什么的。
官方推荐的是精确匹配方式 IndexLink
要是用还是要导包
- 1
- 1
然后使用
- 1
- 1
就行了
你还记得我们自己封装的<NavLink/>
组件吗?
它使用<Link/>
实现的,那么就不能使用 IndexLink方式了吗?
答案是可以,加一个属性就行那就是 onlyActiveOnIndex
让我们在 Two.js这个页面加上返回按钮试试
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
单纯的加一个属性就好很简单,看看效果
进入首页 点击 Two
到了第二页点返回键就可以回到第一页了
效果很简单,但是整明白以后做类似功能就不会迷糊了,接下来还会继续写React-Router相关内容吧,我本身不是做前端的,学习起来不是太快,各位观众老爷见谅哦!
相关文章
- Vue 路由
- Vue创建一个路由项目(Vue Router)
- ZigBee网络路由算法设计
- 懒加载(js+图片+路由)
- Vue实现路由跳转的几种方式(直接上代码)
- MVC路由机制(转)
- Flask项目 - 01、项目有关知识 - flask路由查找
- HCIP第一天笔记——OSI模型,IP地址,静态路由
- vue嵌套路由
- vue router命名路由与视图
- vue-router4之路由元信息
- vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" }
- [Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined、vuejs路由使用的问题Error in render function
- C#-WebApi 路由机制剖析
- 一个由mobx observer引发的React Route路由失效问题探究
- 【微信小程序】Page页面跳转(路由/返回)并传参
- 华为eNSP网络配置综合练习一(vlan +MSTP+VLANif+VRRP+ 静态路由+单臂路由+STP+BFD)
- 华为eNSP网络基础,综合练习二(vlan+mstp+vlanif+静态路由+默认路由)
- 单臂路由与三层交换机实现VLAN通信