React Router 黑笔记?
我横竖睡不着,字里行间看出2个字。。。。
首先,在该项目开始之前,还请大家能够先下载一个项目脚手架。本教程基于该脚手架进行开发
先看文件大致架构
渲染 Route (index.js 启动的component)
//index.js import 'core-js/fn/object/assign'; import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/Main'; import About from './components/about' import Product from './components/Product' import About_detail from './components/About_detail' import About_default from './components/About_default' import { Router , Route , browserHistory , IndexRoute} from 'react-router';let app = (<div><Router history={browserHistory}><Route path='/' component={App}></Route><Route path='/about' component={About}><IndexRoute component={About_default}></IndexRoute><Route path='/about/:eeee' component={About_detail} /> </Route><Route path='/product' component={Product}></Route> </Router></div>) // Render the main component into the dom ReactDOM.render(app, document.getElementById('app'));
使用 Link 进行跳转组件
require('normalize.css/normalize.css'); require('styles/App.css');import React from 'react'; import { Link } from 'react-router';class AppComponent extends React.Component {render() {return (<div className="index"><div><Link to="/" activeStyle={{color: 'red'}} >首页 </Link></div><div><Link to="/about" activeStyle={{color: 'red'}}>关于我们</Link></div><div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒体</Link></div><div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >产品服务</Link></div></div> );} }AppComponent.defaultProps = { };export default AppComponent;
从 Link 到 NavLink (可选,加次封装而已)
import React , { Component } from 'react' import { Link } from 'react-router'class NavLink extends Component {render () {return <Link {...this.props} activeStyle={{color: 'red'}} /> } }
export default NavLink
使用的时候
//onlyActiveOnIndex 只有是当前路由才显示
<li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li>
onlyActiveOnIndex 只有是当前路由才显示 一个路由的判断。
URL 参数的传递 -- 传递query的方法
Link 的写法,Link 代表A标签
<div><Link to={{pathname : "/product", query : {name : 'liujunbin_product'} }} activeStyle={{color: 'red'}} >产品服务</Link></div>
获取query的值
<li><NavLink to="/product?name=wwwwww" onlyActiveOnIndex={true} >name=wwwwww</NavLink></li><h4>{this.props.location.query.name} </h4>
URL 参数的传递 -- 传递params的方法
router 的写法
<Route path='/about/:eeee' component={About_detail} />
Link 的写法,Link 代表A标签
<div><Link to="/about/test" activeStyle={{color: 'red'}}>自媒体</Link></div>
获取params的值
<h1>About</h1> <h1>{this.props.params.eeee}</h1>
嵌套 Route
<Router history={browserHistory}><Route path='/' component={App}></Route><Route path='/about' component={About}><IndexRoute component={About_default}></IndexRoute><Route path='/about/:eeee' component={About_detail} /> </Route> <Route path='/product' component={Product}></Route> </Router>
嵌套 Route 需要注意。在进入子路由的时候,父路由也会执行。看下图
点击的路由是自媒体,其链接是/about/test , 然而/about 也红了。
使用 browserHistory
现代浏览器运行 JS 操作 URL 而不产生 HTTP 请求,
browserHistory和hashHistory不一样,使用browserHistory的时候,浏览器中导航栏的URL就不会出现hash键值对。实际项目中也一般用browserHistory.
<Router history={browserHistory}>
activeStyle,activeClassName
当前路由被点击处于触发显示状态的时候,这个简单,没什么说的
<Link activeClassName="active" to="/">首页</Link><div><Link to="/" activeStyle={{color: 'red'}} >首页</Link></div>
Redirect重定向 (感觉可以来做404,没测试)
<Redirect from="*" to="/404" />
文章稿纸的地址详见github
https://github.com/976500133/react-router-demo
其他的一些特性暂时不说了,使用的不多
作者:二月长河
链接:https://www.jianshu.com/p/3089495d8532
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
转载于:https://www.cnblogs.com/passkey/p/10671644.html
React Router 黑笔记?相关推荐
- React Router 中文文档(一)
React Router 中文文档(一) React Router 中文文档(一) 官方英文文档 - https://reacttraining.com/rea... 版本 - v4.2.0 < ...
- React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
- React Router缓存路由
本篇算是读书笔记,书是<深入理解React Router:从原理到实践> 以下代码实现基于react-router5,demo地址,代码里有微前端相关demo,所以缓存路由默认没开,src ...
- React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
- router路由react_使用React Router在React中受保护的路由
router路由react In this video, you will see how to create a protected route using React Router. This r ...
- hitchhiker部署_Hitchhiker的React Router v4指南:无限远的递归路径!
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
- vue router 入门笔记
vue router 入门笔记 tips: components优先级大于component,即当一个route对象里同时配置了component和components时component视为无效 即 ...
- [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 t ...
- 使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
最新文章
- 【Qt】Qt样式表(Style Sheet):官网说明及例子
- 【OpenCV学习】抠图
- maven 如何看jar是否被修改_如何在线修改jar文件
- maven 版本号插件_测试Maven版本插件自动递增版本号
- as3:sprite作为容器使用时,最好不要指定width,height
- AAAI 2021 | 视频超分中的可变形对齐解读
- 3399元起!120Hz瞳孔屏+65W超级闪充,一加 8T今日发布
- Linux时间与NTP
- css 样式(checkbox开关、css按钮)
- String s =new String()分析堆与栈
- 黑苹果无线网卡的另一种解决方案
- 树莓派输出PWM波驱动舵机
- 嵌入式linux指纹识别项目,基于嵌入式应用平台的指纹识别系统设计
- infer的用法_infer的用法总结大全
- VMware Horizon view 7 云桌面终端安全解决方案
- Centos8.3安装
- 初学键盘计算机输入时注意,打字练习说明.doc
- 微信小程序前端合包流程weshop
- 第三节:原生数据类型使用陷阱 Pitfall of Primitive Data Type
- 【小学信息技术教资面试】教案模板