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路由进阶
最新文章
- ElasticSearch 自定义排序处理
- 实现断点续传的FTP下载类(支持多线程多任务下载)
- Consul 服务发现和配置
- iOS开发——UI进阶篇(六)键盘处理
- MVC部署到iis
- CATransition的动画效果类型及实现方法--老代码备用参考
- 客户端JavaScript(window、document、element)
- sql中复合组建解析
- angular1 实现页面切换及tag页面
- Jira客户端
- man iptables 8
- bzoj 4036 集合幂级数
- Linux c —— opendir函数和readdir函数内涵及用法(转)
- logback 实例
- 驳《编码规范是技术上的遮羞布》自由发挥==摆脱编码规范?X
- Nodejs学习笔记(一)—简介及安装Node.js开发环境
- 【Go入门教程5】流程(if、goto、for、switch)和函数(多个返回值、变参、传值与传指针、defer、函数作为值/类型、Panic和Recover、main函数和init函数、import)
- Maven 高级应用
- preg_match()——php
- js滚动监听
热门文章
- 配置Slf4j依赖,桥接各种多个日志组件(排除commons-logging依赖的影响)
- oracle笔记2-多表查询和子查询
- Java项目性能瓶颈定位
- 前端必须要掌握的几个CSS3的属性
- 使用ABAP和JavaScript代码生成PDF文件的几种方式
- IOS http协议 总结
- POJ - 1201 Intervals (最短路解线性规划)
- Android(java)学习笔记66:Android Studio中build.gradle简介
- 【BZOJ5212】[ZJOI2018] 历史(LCT大黑题)
- 深搜,四色定理,(POJ1129)