React路由-基础篇
React-Router-DOM
安装
-npmjs找到react-router-dom
-yarn add react-router-dom
基本使用方法
1.创建一个文件夹react-router-dom,创建一个index.js文件
2.引入BrowserRouter as Router(可以用ES6的as,给BrowserRouter起个别名),要注意,BrowserRouter是基于h5(浏览器)的router,它不带#,但是存在的问题是一刷新,后端没有匹配的路由就会挂掉,所以需要后传那边做一个跳转
3.Router就是定义路由的一个根组件,Route就是引入的react-router-dom,要注意Router里面只能有一个子节点,所以我们可以用Fragment将所有的Route包裹起来,其实react路由很简单也很语义化:
<Route path="/food" component={Food} /> //这样你就定义好了一个路由,当你路由为/about的时候就会跳到你的About组件
4.默认React的路由时有包容性,也就是比如说,/food/3和/food会同时匹配;若要实现路由的排他性,用Switch标签作为唯一的子节点;Switch标签有一个特点,在这里面的路由会从上往下进行匹配,一旦有一个匹配成功就不会再往下面匹配了,或者也可以在跳转路由的标签里写上一个exact,也可以实现精准匹配:
Switch写法:
<Switch>
<Route exact path="/" component={Food} />
<Route path="/food" component={Food} />
<Route path="/wiki" component={Wiki} />
<Route path="/profile" component={Profile} />
<Route exact component={Page404} />
</Switch>
exact写法:
<Route exact path="/" component={Food} />
5.你可以写一个,这个路由中不定义路由,也就是说这个路由将会作为如果你输入的路由不存在的时候走的组件
<Route exact component={Page404} />
6.引入Link标签,在这里就相当于a标签了,可以to到我们想跳转的路由
<Link to="/profile">profile</Link>
<Link to="/food">food</Link>
<Link to="/wiki">wiki</Link>
你会发现在浏览器上已经帮我们解析成a标签了
7.路由重定向,当路由匹配了/后会跳转到/food路由,注意在这里要加上exact,意为精准匹配
<Redirect from="/" exact to="/food" />
8.路由高亮,将Link标签改成NavLink标签(实现路由高亮的专用标签),然后写上activeClass="active"就可以实现路由的高亮效果
<li>
<NavLink activeClass="active" to="/profile">profile</NavLink>
</li>
<li>
<NavLink activeClass="active" to="/food">food</NavLink>
</li>
<li>
<NavLink activeClass="active" to="/wiki">wiki</NavLink>
</li>
9.可以在路由组件中console.log(this.props),你会发现有很多有用的东西
class Profile extends Component{
render() {
console.log(this.props)
return (
<div>Profile</div>
)
}
}
这篇是关于React路由的基础知识,希望能对想学习React的同学有所帮助,后续会给大家发一个React路由进阶
React路由-基础篇的更多相关文章
- 诱人的 react 视频教程-基础篇(14 个视频)
诱人的 react 视频教程-基础篇(14 个视频) 诱人的 react 视频教程 - 基础篇 #1 介绍「07:25」 诱人的 react 视频教程 - 基础篇 #2 create-react-ap ...
- 【angularjs】【学习心得】路由基础篇
原文:http://www.imooc.com/wenda/detail/236998 AngularJS自带有路由模块ngRoute,但是有经验的老师都推荐我们使用功能更完善更强大的ui-route ...
- React路由-进阶篇
路由进阶 1.多级路由,和之前的思想一样,在子路由里面继续写Route,继续挂载组件,就可以实现多级路由 比如这样:class Food extends Component{ render() { r ...
- React入门----基础篇
React 背景介绍 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- 从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)
背景 最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构.代码 ...
- node基础篇二:模块、路由、全局变量课堂(持续)
今天继续更新node基础篇,今天主要内容是模块.路由和全局变量. 模块这个概念,在很多语言中都有,现在模块开发已经成为了一种潮流,它能够帮助我们节省很多的时间,当然咱们的node自然也不能缺少,看下例 ...
- Hybrid APP基础篇(二)->Native、Hybrid、React Native、Web App方案的分析比较
说明 Native.Hybrid.React.Web App方案的分析比较 目录 前言 参考来源 前置技术要求 楔子 几种APP开发模式 概述 Native App Web App Hybrid Ap ...
- react router @4 和 vue路由 详解(一)vue路由基础和使用
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 1.vue路由基础和使用 a.大概目录 我这里建了一个router文件夹,文件夹下有in ...
随机推荐
- Mvc内建功能(DefaultModelBinder)自动绑定。
在做Asp.Net MVC项目中,都知道View负责页面展示数据或者提供页面收集数据,而所展示的数据或者收集的数据都是从Controller的Action中获取或提交到Controller的Actio ...
- Java入门之JDK安装及环境变量配置
一.安装JDK 安装过程中会出现两次安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中. (注:若无安装目录要求,可全默认设置.无需做任何 ...
- js中 var functionName = function() {} 和 function functionName() {} 两种函数声明的区别 (译)
stackOverflow中看到了很久以前问的一个关于函数声明的问题,问题对函数剖析的特别深.这里翻译了一下组织成一篇小博文,加深一下对这两种声明方式的印象.虽是老调重弹,但是只要能帮助理解问题,不管 ...
- centos7服务器搭建javaweb运行环境及代码部署
之前在一直在学习java web终于写完了第一个小demo,于是在阿里云上买了一个服务器,开始了配置服务器环境的踩坑之旅.... ps:本文不讨论服务器配置的具体步骤,网上都很多,按部就班就是,本文主 ...
- 【起航计划 028】2015 起航计划 Android APIDemo的魔鬼步伐 27 App->Preferences->Launching preferences 其他activity获取Preference中的值
前给例子介绍了如何使用PreferenceActivity 来显示修改应用偏好,用户对Preferences的修改自动存储在应用对应的Shared Preferences中. 本例介绍了如何从一个Ac ...
- 【Android 界面效果46】自定义view常处理的回调方法
onFinishInflate() 当View中所有的子控件均被映射成xml后触发 onMeasure(int, int) 确定所有子元素的大小 onLayout(boolean, int, int, ...
- java:图片压缩
java使用google开源工具实现图片压缩 :http://www.cnblogs.com/linkstar/p/7412012.html
- C#正则表达式获取网址的域名(IP)
代码如下: string p = @"(http|https)://(?<domain>[^(:|/]*)"; Regex reg = new Regex(p, Reg ...
- MySQL入门很简单: 2 MySQL数据类型
2. MySQL数据类型 2.1 整数类型 后面的是默认显示宽度: tinyint(4) smallint(6) mediumint(9) int(11) bigint(20) 2.2 浮点型和定点数 ...
- 将命令的输出生成一个Web页面
解决方法: ConvertTo-Html 命令: 生成一个HTML表格来代表命令的输出,为你提供的每个对象创建一行,在每行中,Powershell会创建代表对象属性的值. 实现效果: