React之前端路由
通过之前的博客介绍,对于react,我们已经可以写单个组件、复合组件/单个页面了,接下来就是实现页面的跳转了,这个时候,我们就需要前端路由了。
一、react-router-dom
安装这个依赖,then

上图应该不难看懂,在这里提几点:
①如果有服务端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。
②当访问 /details 页面时,不光匹配 /details,也配中 /,界面上会把两个页面都渲染出来的。解决方法,可以在想要精确匹配的 Route 上加一个属性 exact,或者使用 Switch 组件。(上述代码用了switch组件)
而在程序入口,index.js中,应该这样:

二、Link
用到路由是,直接可以这样写地址:

又或者(Link标签自动加上#):

三、相关API
大多数情况下,路由的跳转是跟业务相关的,所以通常都是写在js里的,这时候就需要route相关的API了。

React之前端路由的更多相关文章
- javascript基础修炼(6)——前端路由的基本原理
[造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...
- Vue(三)之前端路由
01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...
- 前端路由vue-router介绍
一.前端路由vue-router介绍 Vue-Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模 ...
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- 【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
- vue-router之前端路由的学习总结
什么是路由 路由就是通过互联网把信息从源地址传输到目的地的活动 --维基百科 举例路由器: 路由器提供了两种机制:路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 ...
- vue-learning:38 - router - 前端路由的发展
前端路由的发展 参考博客 前端路由是什么东西? 什么是路由 在jQuery时代,我们使用<a href="https://www.example.com/example/home.ht ...
- JS高级学习笔记(9) 之 转:前端路由跳转基本原理
原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...
- 总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站
总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站 极分享:高质分享+专业互助=没有难做的软件+没有不得已的加班 极分享:高质分享+专业互助=没有 ...
随机推荐
- openwrt生成的镜像放在哪里
答:1.打包好之后是放在build_dir/target-$(cross-compile-toolchan-name)/linux-$(chip-series-name)_$(chip-arch)/t ...
- openwrt中如何在一个软件包中使能busybox中的工具
答:在软件包的Makefile中定义一个宏Package/package-name/config 举例:笔者自己制作了一个名为hello的软件包,但是这个软件包依赖busybox中的ifdown de ...
- SpringMVC基于注解方式的quartz
项目框架: SpringMVC.MyBatis.JSP 1. 首先配置spring.xml文件 <?xml version="1.0" encoding="UTF- ...
- Spring Boot 之restful风格
步骤一:restful风格是什么? 我们知道在做web开发的过程中,method常用的值是get和post.可事实上,method值还可以是put和delete等等其他值. 既然method值如此丰富 ...
- Windows下才有blat进行命令行邮件发送
1.先下载blat.exe文件,下载地址: https://sourceforge.net/projects/blat/files/ 2.解压后只需要blat.exe即可,进入此文件夹,运行如下脚本进 ...
- BZOJ 2761: [JLOI2011]不重复数字 hash哈希
题目就不贴了 点我看题 题意:这题题意很简明,就是给一个序列,把序列里相同的删掉,然后输出,按原数列顺序. 思路:这题之前QZZ和ZN大神犇叫我去做,辣时还不会hash,就留着了.最近某夏令营学会了h ...
- websocket 重连解决方案
1.websocket 重连的脚本:https://github.com/joewalnes/reconnecting-websocket reconnecting-w ...
- web视频资料百度云分享
韩顺平 struts视频教程(31讲)密码:hsp789 链接:https://pan.baidu.com/s/1kSP4CFt1gpVikRaqQXkFGA 密码:kzvp 韩顺平 spring ...
- C#代码实现 Excel表格与Object互相转换,Excel表格导入数据库(.NET2.0 .NET4.0)
前些天在工作上遇到这个需求,在GitHub找到一个开源代码可以用,Fork了一个版本,整理一下发出来. ①.Net项目中使用Nuget安装一个 NPOI 包 https://github.com ...
- 使用Github上传本地代码
最近在学习Python,但是每次写完代码后不知道该怎么跟家里的电脑进行同步.于是开始了学习github ,方法很简单 1:注册个git账号:https://github.com 2:本地安装git软件 ...