试着用React写项目-利用react-router解决跳转路由等问题(三)
来源:互联网 发布:电信软件市场 编辑:程序博客网 时间:2024/04/30 22:35
转载请注明出处:王亟亟的大牛之路
本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink
和 onlyActiveOnIndex
的一些问题
老习惯先安利一下:https://github.com/ddwhan0123/Useful-Open-Source-Android
例子的源码都传git了,源码地址:https://github.com/ddwhan0123/ReactDemo
知识来源:https://github.com/reactjs/react-router-tutorial
前两天写了一些例子,包括普通跳转,嵌套,带参跳转等等,这一篇主要来实现一个常用功能 “回到首页“。
之前的例子里我们通过访问/来进入首页
<Route path="/" component={First}></Route>
但是其实我们Main.js这个页面他没有页面内容,我们一开始就进入了First.js
那么如何让我们的Main.js有内容呢?
可以使用IndexRoute
先来新建一个模拟的页面
Six.js
import React from 'react';export default React.createClass({ render(){ return ( <div> <h3>this is Six</h3> </div> ) }})
也就是刷出一句话
要让Main.js能显示内容需要2步
1在 Main.js里加入以下内容
<IndexRoute component={Six}/>
实质上他让本来空空的根路径多了一个Six
组件
<First> <Six/></First>
这还不够还需要在 First.js里做一些修改,如下
{this.props.children || <Six/>}
这使得<Six/>
成为了根路由的子组件,它成为父节点的this.props.children
内容理解有差异或者错误大街可以给我提,原文地址:https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes
接下来我们来提一下如何做一个返回页,最简单的方式是,写一个路由链过去,这很方便很简单,像这样
<NavLink to="/">To First</NavLink>
官方不推荐我们这么干,因为跳转根路由会丢失一些内容,诸如activeClassName,activeStyle什么的。
官方推荐的是精确匹配方式 IndexLink
要是用还是要导包
import { IndexLink } from 'react-router'
然后使用
<IndexLink to="/" activeClassName="active">To First</IndexLink>
就行了
你还记得我们自己封装的<NavLink/>
组件吗?
它使用<Link/>
实现的,那么就不能使用 IndexLink方式了吗?
答案是可以,加一个属性就行那就是 onlyActiveOnIndex
让我们在 Two.js这个页面加上返回按钮试试
import React from 'react';import styled from 'styled-components';import NavLink from './../component/nav/NavLink';const H3= styled.h3` background-color: #a11`;export default React.createClass({ render(){ return ( <div> <NavLink to="/" onlyActiveOnIndex>To First</NavLink><br></br> <H3>i am two h3</H3> </div> ); }})
单纯的加一个属性就好很简单,看看效果
进入首页 点击 Two
到了第二页点返回键就可以回到第一页了
效果很简单,但是整明白以后做类似功能就不会迷糊了,接下来还会继续写React-Router相关内容吧,我本身不是做前端的,学习起来不是太快,各位观众老爷见谅哦!
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- 试着用React写项目-利用react-router解决跳转路由等问题(一)
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- 试着用React写项目-利用react-router解决跳转路由等问题(一)
- 试着用React写项目-利用react-router解决跳转路由等问题(二)
- 试着用React写项目-利用react-router解决跳转路由等问题(四)
- react入门之路由----react-router的跳转问题
- 试着用React写项目-利用styled-components解决样式问题
- react-router JS 控制路由跳转
- react-router 路由控制页面跳转
- React-router路由实践
- React-router路由实践
- react-router路由
- React-router路由实践
- react-router 路由匹配
- react-router 路由
- ReactJS与antdDesign中页面跳转问题(React Router)
- Android之发送通知栏消息
- warning C4800: “int”: 将值强制为布尔值“true”或“false”(性能警告)
- 多进程和多线程的选择
- oracle笔记一oracle的安装与配置
- mst
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
- Activity四种启动模式
- Linux 远程调用图形界面
- JAVA之动态代理,静态代理和CGLIB
- Table布局核心:table标签设置 border="0" cellspacing="0" cellpadding="0",td设置左边框和上边框,table设置下边框和右边框
- iOS
- Android 对TextView添加删除线,下划线,加粗,斜体等效果
- C语言实验——圆柱体计算
- 任务调度系统-任务依赖的设计