React 路由&脚手架
1.创建react项目
npm install -g create-react-app 全局环境
create-react-app my-app 创建项目
cd my-app 进入项目
npm start 启动
React-router介绍
什么是路由?
路由是根据不同的 url 地址展示不同的内容或页面。
React Router
一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。
安装低版本react-router
卸载高版本react react-dom
npm uninstall react react-dom --save-dev
安装react-router2.0版本 安装axios
npm i react@15 react-dom@15 react-router@2 axios --save-dev
2.准备React组件
import React from 'react'
import ReactDOM from 'react-dom’
import { Router, Route, Link, hashHistory} from ‘react-router’
//react-router中定义了history这个属性 用于方便管理路由的方向
//browserHistory/ hashHistory
3.link
定义链接的组件,类似于a标签。
<Link to=“/users>users</Link> {this.props.children} //==相当于路由试图的容器
4.定义路由 index.js
render (<Router history={hashHistory}> <Route path=”/" component={Demo}> <Route path="/home" component={Header}></Route> <Route path="/about" component={Con}></Route> </Route> </Router>, document.getElementById('root'))
<Route>组件有如下属性:
path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
Component==设置该路径要加载的组件
索引 IndexRoute
指定默认情况下加载的子组件。你可以把IndexRoute想象成某个路径的index.html。
例如:
<Route path="/" component={App}> <IndexRoute component={Index}/> </Route>
样式
当路径匹配时会触发activeStyle属性。
const ACTIVE = { color: 'red' }
普通链接
<Link to="/users" activeStyle={ACTIVE}>users</Link>
地址栏传参
定义:
<Link to=“/users/1>users</Link> <Route path="/user/:xxxx" component={User}/>
取得参数:
this.props.params.xxxx==1
路径跳转(编程式路由)
在事件中进行路由路径跳转
hashHistory.push('/home')
绝对路径和重定向
相对路径:
不以/开头的路径,匹配时就会相对于父组件的路径。
<Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /> </Route>
访问路径:/inbox/messages/:id
绝对路径:
以/开头的路径。如果在嵌套路由中使用会跳出父组件的影响。
<Route path="inbox" component={Inbox}> <Route path=“/messages/:id" component={Message} /> </Route>
访问路径:/messages/:id
重定向:
当路径匹配from的时候,自动重定向(跳转)到to的地址上面。
<Route path=”/index" component={index}> <Redirect from=”/index/a" to=“/other" /> </Route>
从 /index/a 跳转到 /other
重定向
<IndexRedirect to="/home"/>
查询符-query
定义:
<Route path="/user/:xxxx" component={User}/>
取得参数:
this.props.params.xxxx
例如:
<Link to={{pathname:'/list',query:{id:item.goodsID} }}> <Route path="/user" component={User}/> url:/user/10086?foo=bar
this.props.params.userId 是 10086
this.props.location.query.foo 是 bar
总结:
路由的各个组件的生命周期和普通的组件生命周期是一样的。路由根据不同的url来加载和卸载不同的组件
React 路由&脚手架的更多相关文章
- React/VUE 脚手架2.0和3.0
react官方脚手架 npm install -g create-react-app create-react-app my-app cd my-app npm start 区别自己对比 vue2.x ...
- 自制的React同构脚手架
代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- react路由的安装及格式和使用方法
react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app 项目名 在创建好的项目目录命令窗里输入: ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- react路由配置(未完)
React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...
- React路由-基础篇
React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...
- react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
随机推荐
- rm -rf /*时遇到的趣事
今天在一个linux群里面闲逛的时候,突然看见一个愤青把自己的linux系统给 rm -rf /* 了 ,感觉很好玩就看了一下,突然我发现了有趣的事情! 我的朋友问我,这个为什么显示没有删除,我看了确 ...
- CentOS7安装高版本gcc
CentOS7安装高版本gcc 下载 从hust镜像站下载gcc源码包. http://mirror.hust.edu.cn/gnu/gcc/ 我选择的是gcc-8.3.0.tar.gz. cd mk ...
- DDMS 视图 Emulator Control 为灰色
Emulator Control 模拟发送短信时,发现所有选项均为灰色,如图所示: 解决方法: 确认以下四种情形或方法 已测试 Genymotion 模拟器和真机均不行,而Eclipse自带模拟器可以 ...
- 为什么for循环可以遍历list:Python中迭代器与生成器
1 引言 只要你学了Python语言,就不会不知道for循环,也肯定用for循环来遍历一个列表(list),那为什么for循环可以遍历list,而不能遍历int类型对象呢?怎么让一个自定义的对象可遍历 ...
- RGW 学习 前言
对于CEPH的学习已经有一段的时间了,最近的一段时间都是集中在RGW网关这一方面,所以准备将学习的过程以及源代码的分析,将以随笔的形式记录下来. 每天更新一章.
- Android--SharedPreferences数据存储方案
SharedPreferences是使用键值对的形式存储的,并且支持多种不同的数据类型,存的是String,取得值也是String. 使用SharedPreferenc ...
- Template(模板)模式
第三章:模板模式 Template模式比较简单,是基于继承关系的一种设计模式,由父类定义处理流程框架,由子类中实现具体处理. Code: package example.template; /*** ...
- Java ActionListenner类的一些理解
Java的ActionListenner事实上我去年年这个时候大概就已经接触到了,也学会了比较简单的使用.但却始终不能理解ActionListenner的一系列的运行是怎么维持这么一个联系的? 我产生 ...
- java并发编程(十二)----(JUC原子类)数组类型介绍
上一节我们介绍过三个基本类型的原子类,这次我们来看一下数组类型: AtomicIntegerArray, AtomicLongArray, AtomicReferenceArray.其中前两个的使用方 ...
- 动态SQL查询
if+where: 用于查询操作,where标签可以智能判断是否添加and.or.where关键词 示例: <select id="findByParam" resultTy ...