React-Router入门
之前自己有在用React来重构之前写过的自己工作室官网,其中有用到React中的核心思想:组件,props,state。还有用Rap的接口来实现前后端交互请求(就是请求团队成员的信息部分)。自己觉得还是实现起来比较简单。
现在呢。学习React不仅要学习官网的一些知识,还要学习一些有关它的技术栈。
今天自己搜索了阮一峰的有关React-Router的教程。自己跟着github上的14个小栗子进行了练习。
下面总结一些。
先粘贴一段代码:
//route.js
module.exports = (
<Route path="/" component={App}>
<Route path="/repos" component={Repos}>
<Route path="/repos/:username/:repoName" component={Repo} />
</Route>
<Route path="/about" component={About} />
</Route>
);
//index.js
import React from 'react'
import { render } from 'react-dom'
import {Router,browserHistory} from 'react-router';
import routes from './modules/routes';
render(<Router history={browserHistory} routes={routes} />,document.getElementById('app'));
相信浏览一遍上面的代码之后,就会发现主要有Router,Route这两个组件。Router组件本身只是一个容器,真正的路由要通过Route组件定义,Route组件定义了URL路径和组件之间的对应关系,你可以同时使用多个Route组件。
举个简单的小栗子
用户访问/repos(比如http://localhost:8080/#/repos)时,加载Repos组件;访问/about(http://localhost:8080/#/about)时,加载About组件。
React-Router入门的更多相关文章
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React从入门到放弃之前奏(5):ReactRouter4
概念 安装:npm i -S react-router react-router-dom GitHub:ReactTraining/react-router React Router中有三种类型的组件 ...
- React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- 基于Nodejs生态圈的TypeScript+React开发入门教程
基于Nodejs生态圈的TypeScript+React开发入门教程 概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...
- 【转载】React初学者入门须知
http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know react.js入门学习 看了一遍,没什么特 ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
随机推荐
- github新建托管项目及上传项目
一.新建托管项目 1.注册: 2.点击new repositories新建一个新项目: 3.输入项目名称及项目描述,Create repository: 4.点击右边栏的剪切板图标,记录下你的项目地址 ...
- Linux 入门记录:十六、Linux 多命令协作:管道及重定向
一.多命令协作 在 Linux 系统当中,大多数命令都很简单,很少出现复杂功能的命令,每个命令往往只实现一个或多个很简单的功能.通过将不同功能的命令组合一起使用,可以实现某个复杂功能的. Linux ...
- Linux 入门记录:二、Linux 文件系统基本结构
一.树状目录结构 Linux 文件系统是一个倒置的单根树状结构.文件系统的根为"/":文件名严格区分大小写:路径使用"/"分割(Windows 中使用" ...
- python之requests库使用问题汇总
一.请求参数类型 1.get requests.get(url, data, cookies=cookies) url:字符串: data:字典类型,可以为空: cookies:字典类型,可以为空: ...
- 2017多校第6场 HDU 6105 Gameia 博弈
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6105 题意:Alice和Bob玩一个游戏,喷漆!现在有一棵树上边的节点最开始都没有被染色.游戏规则是: ...
- [收集]关于MSSQL数据库的一些查询
sqlserver快速查找所有存储过程中是否包含某字符 --将XXXX替换成你要查找的内容 select name from sysobjects o, syscomments s where o.i ...
- windows系统安装mysql压缩zip版
1.下载 打开官网:https://www.mysql.com 进入DOWNLOADS--->Community--->MySQL Community Server,选择系统对应的版本点击 ...
- C语言 ,两个字符串参数,判断是否包含另一个字符串,返回所在位置
char * cyp(char *s1,char *s2) { char *p = NULL; char *q = NULL; char *q1 = NULL; while(*s1!='\0') { ...
- window下线程同步之(Semaphores(信号量))
HANDLE WINAPI CreateSemaphore( _In_opt_ LPSECURITY_ATTRIBUTES lpSemaphoreAttributes _In_ LONG lIniti ...
- JMX monitor weblogic 总结
https://blog.csdn.net/joy_91/article/details/42774839