【React 8/100】 React路由
React路由
React路由介绍
现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。
- 前端路由功能:让用户从一个视图(页面)导航到另一个视图(页面)
- 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
- 使用React路由简单来说,就是
配置路径和组件
路由的基本使用
使用步骤
安装: npm install react-router-dom
导入路由的三个核心组件: Router / Route / Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
使用Router 组件包裹整个应用
使用Link组件作为导航菜单(路由入口) --- 被编译成 a 标签 ---location.pathname
使用Route组件配置路由规则和要展示的组件(路由出口)
// 导入路由组件
import { BrowserRouter as Router, Route, Link} from 'react-router-dom' const PageTest = () => (<div>test page context</div>) const RouterDemo = () => {
return (
{/* 使用Router 组件包裹整个应用 */}
<Router>
<div>Router Demo</div>
{/* 指定路由入口 */}
<Link to="/first">page one</Link> {/* 指定路由出口*/}
<Route path="/first" component={PageTest}></Route>
</Router>
)
}; ReactDOM.render(<RouterDemo/>, document.getElementById('root'));
常用组件说明
Router组件:包裹整个应用,一个React应用只需要使用一次
两种常用的Router: HashRouter和BrowserRouter
HashRouter: 使用URL的哈希值实现 (localhost:3000/#/first)
import { HashRouter as Router, Route, Link} from 'react-router-dom'
推荐 BrowserRouter:使用H5的history API实现(localhost3000/first)
Link组件:用于指定导航链接(a标签)
- 最终Link会编译成a标签,而to属性会被编译成 a标签的href属性
Route组件:指定路由展示组件相关信息
- path属性:路由规则,这里需要跟Link组件里面to属性的值一致
- component属性:展示的组件
- Route写在哪,渲染出来的组件就在哪
路由的执行过程
- 当我们点击Link组件的时候,修改了浏览器地址栏中的url
- React路由监听地址栏url的变化
- React路由内部遍历所有的Route组件,拿着Route里面path规则与pathname进行匹配
- 当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容
编程式导航
场景:点击登陆按钮,登陆成功后,通过代码跳转到后台首页,如何实现?
编程式导航:通过JS代码来实现页面跳转
history是React路由提供的,用于获取浏览器历史记录的相关信息
push(path):跳转到某个页面,参数path表示要跳转的路径
this.props.history.push('/pagePath')
go(n):前进或后退功能,参数n表示前进或后退页面数量
/*
编程式导航
*/
class Login extends React.Component {
btnClicked = () => {
// 省略其它代码
console.log('clickedbtn');
this.props.history.push('/home')
};
render() {
return (
<div>
<p>登录页面:</p>
<button onClick={this.btnClicked}>back to home</button>
</div>
)
}
}
const Home = props => {
const handleBack = () => {
props.history.go(-1)
};
return (
<div>
<h2>我是后台首页</h2>
<button onClick={handleBack}>返回登录页面按钮</button>
</div>
)
};
const Demo = () => (
<Router>
<div>
<h1>编程式导航:</h1>
<div>
{/* 路由入口 */}
<Link to='/login'>login</Link>
</div>
<div>
{/* 路由出口 */}
<Route path='/login' component={Login}></Route>
<Route path='/home' component={Home}></Route>
</div>
</div>
</Router>
);
ReactDOM.render(<Demo />, document.getElementById('root'));
默认路由
- 现在的路由都是通过点击导航菜单后展示的,如果进入页面的时候就主动触发路由呢
- 默认路由:表示进入页面时就会匹配的路由
- 默认路由:只需要把path设置为
'/'
<Route path='/' component={Home}></Route>
匹配模式
模糊匹配模式
- 当Link组件的to属性值为 '/login' 时候,为什么默认路由也被匹配成功?
- 默认情况下,React路由是模糊匹配模式
- 模糊匹配规则:只要pathname以path开头就会匹配成功
精准匹配
默认路由认可情况下都会展示,如果避免这种问题?
给Route组件添加exact属性,让其变为精准匹配模式
精确匹配:只有当path和pathname完全匹配时才会展示改路由
<Route exact path='/' component={Home}></Route>
小结
- React路由可以有效的管理多个视图实现 SPA
- 路由先需要通过安装
- Router组件包裹整个应用,只需要使用一次
- Link组件是入口,Route组件是出口
- 通过props.history实现编程式导航
- 默认是模糊匹配,添加exact编程精确匹配
- React路由的一切都是组件,可以像思考组件一样思考路由
【React 8/100】 React路由的更多相关文章
- React+DvaJS 之 hook 路由权限控制
博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...
- react项目的react-router-dom路由的使用
现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- React Native & react-native-web-player & React Native for Web
React Native & react-native-web-player & React Native for Web https://github.com/dabbott/rea ...
- react初探索--react + react-router + ant-design 后台管理系统配置
首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- 【React】377- 实现 React 中的状态自动保存
点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...
- react聊天室|react+redux仿微信聊天IM实例|react仿微信界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...
- 七天接手react项目 系列 —— react 脚手架创建项目
其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...
随机推荐
- 通过ecplise导入mysql的jar包时,右键找不到build path问题
当我们执行java连接数据库程序的时候,我们需要再我们的项目里导入mysql的jar包,这时,我们需要右键->build path进行导入,但是有时候我们右键的时候并没有出现build path ...
- 源码阅读-JLRoutes路由设置
最后更新: 2018-1-20 JLRoutes 是在 github 上 Star 比较多的一个, 在各大平台也有介绍, 一些知识可以参考到下面的连接查看. 本文仅仅作为我的思考以及对应的心得; 一. ...
- ELK日志平台搭建
功能: 1. 查看当天的服务器日志信息(要求:在出现警告甚至警告级别以上的都要查询)2. 能够查看服务器的所有用户的操作日志3. 能够查询nginx服务器采集的日志(kibana作图)4. 查看tom ...
- 通过jedis连接redis单机成功,使用redis客户端可以连接集群,但使用JedisCluster连接redis集群一直报Could not get a resource from the pool
一,问题描述: (如题目)通过jedis连接redis单机成功,使用JedisCluster连接redis集群一直报Could not get a resource from the pool 但是使 ...
- Comparable接口与Comparator接口的比较————Comparator接口详解
Comparator接口位于:java.util包中. Comparator接口:1. 强行对某个对象的Collection进行整体排序.值得注意的是:Comparator接口可以作为参数传到一些so ...
- POJ 1625 Censored ( Trie图 && DP && 高精度 )
题意 : 给出 n 个单词组成的字符集 以及 p 个非法串,问你用字符集里面的单词构造长度为 m 的单词的方案数有多少种? 分析 :先构造出 Trie 图方便进行状态转移,这与在 POJ 2278 中 ...
- leetcode-mid-dynamic programming-62. Unique Paths
mycode time limited class Solution(object): def uniquePaths(self, m, n): """ :type ...
- DAY 1模拟赛
DAY1 杨溢鑫小姐姐出题 好毒瘤啊 T1 低仿机器人 (robo,1s,64M) 题目描述 自从 Dji 推出 robomaster S1 机器人过后,小文就一直缠着爸爸想要一个机器人.没想到爸爸最 ...
- iOS常用加密之RSA加密解密
前言: iOS常用的加密有很多种,前两天在工作中遇到了RSA加密,现在把代吗分享出来. RSA基本原理 RSA使用"秘匙对"对数据进行加密解密.在加密解密数据前,需要先生成公钥(p ...
- Flask基础总结
Flask 基础总结 .Flask优点: 拥有强大的第三方组件小而精非常全面,不足就是更新太快 .Flask中的三剑客: HTTPRespone redierct render_template .F ...