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

  1. React+DvaJS 之 hook 路由权限控制

    博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...

  2. react项目的react-router-dom路由的使用

    现在测试一下react-router-dom路由的使用,首先在App.js这个文件搭配路由 import React, { Component } from 'react'; import {Link ...

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

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

  4. react实战系列 —— React 中的表单和路由的原理

    其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...

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

  6. react初探索--react + react-router + ant-design 后台管理系统配置

    首先确认安装了node环境,Node >= 6. 如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习. react Api ...

  7. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  8. 【React】377- 实现 React 中的状态自动保存

    点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

  9. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  10. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

随机推荐

  1. 通过ecplise导入mysql的jar包时,右键找不到build path问题

    当我们执行java连接数据库程序的时候,我们需要再我们的项目里导入mysql的jar包,这时,我们需要右键->build path进行导入,但是有时候我们右键的时候并没有出现build path ...

  2. 源码阅读-JLRoutes路由设置

    最后更新: 2018-1-20 JLRoutes 是在 github 上 Star 比较多的一个, 在各大平台也有介绍, 一些知识可以参考到下面的连接查看. 本文仅仅作为我的思考以及对应的心得; 一. ...

  3. ELK日志平台搭建

    功能: 1. 查看当天的服务器日志信息(要求:在出现警告甚至警告级别以上的都要查询)2. 能够查看服务器的所有用户的操作日志3. 能够查询nginx服务器采集的日志(kibana作图)4. 查看tom ...

  4. 通过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 但是使 ...

  5. Comparable接口与Comparator接口的比较————Comparator接口详解

    Comparator接口位于:java.util包中. Comparator接口:1. 强行对某个对象的Collection进行整体排序.值得注意的是:Comparator接口可以作为参数传到一些so ...

  6. POJ 1625 Censored ( Trie图 && DP && 高精度 )

    题意 : 给出 n 个单词组成的字符集 以及 p 个非法串,问你用字符集里面的单词构造长度为 m 的单词的方案数有多少种? 分析 :先构造出 Trie 图方便进行状态转移,这与在 POJ 2278 中 ...

  7. leetcode-mid-dynamic programming-62. Unique Paths

    mycode   time limited class Solution(object): def uniquePaths(self, m, n): """ :type ...

  8. DAY 1模拟赛

    DAY1 杨溢鑫小姐姐出题 好毒瘤啊 T1 低仿机器人 (robo,1s,64M) 题目描述 自从 Dji 推出 robomaster S1 机器人过后,小文就一直缠着爸爸想要一个机器人.没想到爸爸最 ...

  9. iOS常用加密之RSA加密解密

    前言: iOS常用的加密有很多种,前两天在工作中遇到了RSA加密,现在把代吗分享出来. RSA基本原理 RSA使用"秘匙对"对数据进行加密解密.在加密解密数据前,需要先生成公钥(p ...

  10. Flask基础总结

    Flask 基础总结 .Flask优点: 拥有强大的第三方组件小而精非常全面,不足就是更新太快 .Flask中的三剑客: HTTPRespone redierct render_template .F ...