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 路由&脚手架的更多相关文章

  1. 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 ...

  2. 自制的React同构脚手架

    代码地址如下:http://www.demodashi.com/demo/12575.html Web前端世界日新月异变化太快,为了让自己跟上节奏不掉队,总结出了自己的一套React脚手架,方便日后新 ...

  3. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  4. react路由的安装及格式和使用方法

    react路由的安装: 在要创建项目的目录命令窗里输入: cnpm install -g create-react-app create-react-app  项目名 在创建好的项目目录命令窗里输入: ...

  5. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  6. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  7. react路由配置(未完)

    React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-ro ...

  8. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  9. react 路由 react-router@3.2.1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

随机推荐

  1. firewalld防火墙命令规则设置

    1.firewalld的基本使用 启动/关闭: systemctl start/stop firewalld 查看状态: systemctl status firewalld 开机启用/禁用 : sy ...

  2. 【Android Studio】E/memtrack: Couldn't load memtrack module (No such file or directory)【待解决】

    Android Studio 又遇到了问题--如下: 06-21 07:27:57.855 3232-3232/? E/memtrack: Couldn't load memtrack module ...

  3. android 基于wifi模块通信开发

    这篇文章主要是我写完手机与wifi模块通信后所用来总结编写过程的文章,下面,我分几点来说一下编写的大概流程. 一.拉出按钮控件并设置它的点击事件 二.设置wifi权限 三.打开和关闭wifi 四.扫描 ...

  4. 【Android】Jetpack中的ViewModel:自动保存页面数据

    目录 ViewModel 简介 ViewModel的使用方法 ViewModel 简介   ViewModel 允许数据在配置更改(如屏幕旋转)后仍然存在,使用 ViewModel 可以免去开发者花费 ...

  5. middleware中间件

    django 中的中间件(middleware),在django中,中间件其实就是一个类,在请求到来和结束后,django会根据自己的规则在合适的时机执行中间件中相应的方法. 在django项目的se ...

  6. 的Blog

    作者:Ovear链接:https://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  7. Docker最简单入门之(一)——介绍和配置Docker

    0. 前言 最近学完了Dokcer,特别记录一下,算是对自己学习成果的一个总结.以便自己能够更好的理解Docker.粗略估计了一下,我大概会分成4个部分,只记录一下常用的操作,至于一些比较难的操作或者 ...

  8. Powered by .NET Core 进展:用 docker-compose 验证高并发问题嫌疑犯 docker swarm

    相关博文: [故障公告]发布 .NET Core 版博客站点引起大量 500 错误 [网站公告].NET Core 版博客站点第二次发布尝试 暴风雨中的 online : .NET Core 版博客站 ...

  9. UML类图(1.3)

    UML:Unified modeling Language 统一建模语言 UML类图:用来描述系统所包含的类以及类之间的关系. 画图工具:https://www.processon.com 类之间的6 ...

  10. 2月11日 阿里巴巴Java开发手册 读后感

    该手册分为几个部分: 印象深刻的几点: (五)集合处理 2.[强制]ArrayList的subList结果不可强转成ArrayList,否则会抛出ClassCastException 异常:java. ...