试着用React写项目-利用react-router解决跳转路由等问题(二)
转载请注明出处:王亟亟的大牛之路
这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android (总有你须要的东西)
上一篇讲到我们能够利用 Router来实现嵌套跳转等效果,可是那些都是静态的,这一篇着重于写一些动态跳转内容
Link
之前也有提及。旧时代我们经常使用的跳转形式就是<a/>
,React丰富的api也提供给我们相似的实现。那就是Link
,我们用一个样例来看一下这玩意怎么用
他也是react-router
包里的一部分,先 import
import { Link } from 'react-router'
然后就能够正常使用了,像这样
import React from 'react'
import { Link } from 'react-router'export default React.createClass({render() {return (<div><h1>React Router Tutorial</h1><ul role="nav"><Link to="/Three">Three</Link><br></br><Link to="/Three">Three</Link></ul></div>)}
})
效果例如以下
当然。之前注冊的<Route>
不能少,不然无法进行跳转
main.js的片段
<Route path="/Three" component={Three}/><Route path="/Two" component={Two}/>
activeStyle activeClassName
activeStyle 能够帮我们改变链接的样式。使用简单配一个属性就可以。像这样
<Link to="/Two" activeStyle={{color: 'red'}}>Two</Link>
上面代码中,当前页面的链接会红色显示
还有个字段是activeClassName 指定当前路由的Class
像这样
<Link {...this.props} activeClassName="active"/>
那既然 相似的使用场景非常多。为何不封装一个组件。方便调用?
ok,我们新建一层文件夹,像这样
里面放一个专门处理跳转的NavLink.js对<Link>
进行一些简单的封装
import React from 'react';
import { Link } from 'react-router';export default React.createClass({render() {return (<Link {...this.props} activeClassName="active"/>)}
})
非常easy让我们能传參。统一设置activeClassName,当然你想自己定义怎么都能够
URL Params
有些时候我们会碰到一些非常像但又不是全然不同的路由,像这样
/Three/haha
/Three/haha/haha1
/Three/hehe/hehe1
官方提供给我们一个 以: 开头的配对形式。像这样
/Three/:haha/:haha1
我们 拿
/Three
/Three/haha
做个演示案例
由于是分层渲染,所以Three/haha就要交给第三方黑暗势力去展示。而Three还是给Three
所以我们的main.js,如今长这样
import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory , Link } from 'react-router';
import First from './First';
import Three from './Three';
import Two from './Two';
import Four from './Four';render((<Router history={hashHistory}><Route path="/" component={First}></Route><Route path="/Three" component={Three}/><Route path="/Three/:name" component={Four}/><Route path="/Two" component={Two}/></Router>
), document.getElementById('app'))
Four就是我们新加入渲染的组件,内容不用管。你得理解Three和Three/:name实质上并非同一个东西可是他属于同一种匹配规则。而这规则匹配后都将被Four去渲染
Four.js
import React from 'react';export default React.createClass({render(){return (<div><h2>{this.props.params.name}</h2></div>)}
})
这里接受一个传递来的name属性,把它显示出来。值是跳转传来的
我们让 第三个页面产生多级跳转到,更改例如以下
import React from 'react';
import styled from 'styled-components';
import NavLink from './../component/nav/NavLink';const H2 = styled.h2`color: #eee
`;export default React.createClass({render(){return (<div><h2>hi i am three</h2><ul><NavLink to="/Three/haha">haha</NavLink><br></br><NavLink to="/Three/heihei">heihei</NavLink></ul></div>)}
})
先导包把刚才自己创建的主件给“抠来用“
import NavLink from './../component/nav/NavLink';
然后分别进行路由配置,一个传haha一个heihei,我们来看下Four有没有对应效果,先看看Three
我们点一下haha
url,值都显示出了我们已经得到了传来的haha
下一篇将是Router的完结篇,总体是从官方demo入手加以自己的理解和尝试,有问题或者有疑问能够给我留言,谢谢。
https://github.com/ddwhan0123/ReactDemo
转载于:https://www.cnblogs.com/gavanwanggw/p/7350974.html
试着用React写项目-利用react-router解决跳转路由等问题(二)相关推荐
- [react] 写例子说明React如何在JSX中实现for循环
[react] 写例子说明React如何在JSX中实现for循环 map方法 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前 ...
- React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
- 做网站用html好还是vue好,中大型项目用react还是vue?
中大型项目用react还是vue? 中大型项目可以用react,react比较适合大型项目. 原因: 1.大型项目的庞大带来的是代码优化以及性能优化react提倡的更细粒度的封装,带来的组件的复用性提 ...
- TypeScript 用腻了?来换换口味吧——使用 ReScript + React 写一个简单的Todo List
前言 前端技术如今蓬勃发展,时时刻刻都有新的技术栈诞生,这使得各位前端们常常大呼学不动了.既然如此笔者为何还要去学一门和 TypeScript 类似的新语言呢,难道 TypeScript 不够用嘛. ...
- 【前端工具分享】Electron React Boilerplate(Electron+React项目模板,开箱即用)
目的 桌面客户端开发,也已经是前端领域的一致分支了.跳出浏览器的我们,会获得更多能力. Electron,目前客户端开发最知名的框架,以VSCode为首的各种应用,都是基于他做的. React,最强大 ...
- React新闻网站项目
一.创建React项目 页面展示 1.打开终端 // 创建react项目 $ npx create-react-app my-app // 进入文件目录 $ cd my-app // 运行 $ npm ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 "8小时内拼工作,8小 ...
- 如何运行react创项目
最近在看一个项目,前端是react写的代码,平时作为后端的我,以为写点html代码就是前端的了 但是我们知道最近比较火的是react为了跟上时代的步伐,我也想去布置一个react项目 其实也不难: 这 ...
- antd + react model自定义footer_使用ESLint+Prettier规范React+Typescript项目
项目开发过程中,大多数时候我们使用别人搭建好的脚手架编写代码,是项目的参与者.对于一些细节往往被忽略了.其中代码检测本身是一类非常简单的配置,但涉及不同框架和语言组合使用的时候,可能比想象中要困难,本 ...
最新文章
- 展望二十一世纪第三个十年
- .NetCore 3.1 安装本地化中文智能提示
- JS之返回数组指定元素的slice
- resin4 发布war包
- Java面试之设计模式七大原则
- java 中j= i_java中 i = i++和 j = i++ 的区别
- Few-Shot Object Detection with Attention-RPN and Multi-Relation Detector 论文翻译
- Mysql基础命令语句(1)
- EMACS 使用手册
- 网站常用JSON嵌套形式
- 图解SM2算法流程——第1章 概述
- 【Tools系列】在Win7系统上利用Simics安装Solaris 8 SPARC操作系统
- 服务器支持安装显卡吗,如何在2U服务器里装显卡
- iphone6s html5没声音,iphone6s没有声音了怎么办(解决苹果机来电没声音的3种方式)...
- 轮播图进度条同步切换(参考漫威官网)
- java 减法基础_Java 基础入门
- c++中sqrt函数的使用
- WebView加载html图片不显示问题
- 【集合详解】ArrayList源码解读之动态扩容
- 360手机刷机:360N7lite刷机