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

一、react-router-dom

安装这个依赖,then

上图应该不难看懂,在这里提几点:

①如果有服务端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter

②当访问 /details 页面时,不光匹配 /details,也配中 /,界面上会把两个页面都渲染出来的。解决方法,可以在想要精确匹配的 Route 上加一个属性 exact,或者使用 Switch 组件。(上述代码用了switch组件)

而在程序入口,index.js中,应该这样:

二、Link

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

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

三、相关API

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

React之前端路由的更多相关文章

  1. javascript基础修炼(6)——前端路由的基本原理

    [造轮子]是笔者学习和理解一些较复杂的代码结构时的常用方法,它很慢,但是效果却胜过你读十几篇相关的文章.为已知的API方法自行编写实现,遇到自己无法复现的部分再有针对性地去查资料,最后当你再去学习官方 ...

  2. Vue(三)之前端路由

    01-前端路由 1.前端路由的实现原理 vue+vue-router 主要来做单页面应用(Single Page Application) 为什么我们要做单页面应用? (1)传统的开发方式 url改变 ...

  3. 前端路由vue-router介绍

    一.前端路由vue-router介绍 Vue-Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模 ...

  4. 从 React Router 谈谈路由的那些事

    React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

  5. 【前端路由】Vue-router 中hash模式和history模式的区别

    咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...

  6. vue-router之前端路由的学习总结

    什么是路由 路由就是通过互联网把信息从源地址传输到目的地的活动 --维基百科 举例路由器: 路由器提供了两种机制:路由和转送 路由是决定数据包从来源到目的地的路径 转送将输入端的数据转移到合适的输出端 ...

  7. vue-learning:38 - router - 前端路由的发展

    前端路由的发展 参考博客 前端路由是什么东西? 什么是路由 在jQuery时代,我们使用<a href="https://www.example.com/example/home.ht ...

  8. JS高级学习笔记(9) 之 转:前端路由跳转基本原理

    原文链接: 前端路由跳转基本原理 前述 前端三大框架Angular.React和Vue都推行单页面应用SPA开发模式,这是因为在路由切换时,替换DOM Tree中发生修改的DOM部分,来减少原来因为多 ...

  9. 总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站

    总结2015搭建日志,监控,ci,前端路由,数据平台,画的图与界面 - hugo - ITeye技术网站 极分享:高质分享+专业互助=没有难做的软件+没有不得已的加班 极分享:高质分享+专业互助=没有 ...

随机推荐

  1. mapper的namespace

    一般情况下mapper的namespace能随便写,不重复即可, 但如果希望使用mybatis动态代理的接口,就需要namespace中的值和需要对应的Mapper(dao)接口的全路径一致.例如:c ...

  2. 20145302张薇 《Java程序设计》第二周学习总结

    20145302张薇 <Java程序设计>第一周学习总结 教材学习内容总结 第三章 第三章讲的是基本类型,变量,运算符和基本条件语句. 基本类型分为: 整数:short(2 byte),i ...

  3. 20145310《Java程序设计》第3次实验报告

    20145310<Java程序设计>第3次实验报告 实验内容 使用 git 上传代码 使用 git 相互更改代码 实现代码的重载 实验步骤 首先使用git设置用户名和ssh公钥 使用git ...

  4. c#结构体和字节流之间的相互转换

    结构体转byte数组 1  首先要明白 ,是 在那个命名空间下  System.Runtime.InteropServices; 2  首先得到结构体的大小 2  开辟相应的内存空间 3  将结构体填 ...

  5. DOS/BAT批处理if exist else 语句的几种用法

    在DOS批处理命令中常常会通过if语句来进行判断来执行下面的命令, 那么批处理if语句怎么用呢,下面学无忧小编就来说说有关批处理if以及if exist else语句的相关内容.一.批处理if书写格式 ...

  6. MATLAB 图形图像处理

    theme: MATLAB author: pprp date: 2018/2/2 --- MATLAB 图形图像处理 二维绘图命令 plot 线性空间 plot(t,[x1,x2,x3]) : 在同 ...

  7. 2017ACM/ICPC广西邀请赛-重现赛1005 CS course

    2017-08-31 16:19:30 writer:pprp 这道题快要卡死我了,队友已经告诉我思路了,但是做题速度很缓慢,很费力,想必是因为之前 的训练都是面向题解编程的缘故吧,以后不能这样了,另 ...

  8. Harbor 定制页面 和 二次开发指南

    harbor的官方地址:https://github.com/goharbor/harbor 想对Harbor进行二次开发,首先要指定一个harbor的版本,这里我们以Harbor:1.6.2为例: ...

  9. 机器学习笔记—K-均值聚类

    在聚类问题中,给定训练集 {x(1),...,x(m)},要把数据分成内聚的“簇”.这里 x(i)∈R,没有 y(i).所以,这是一个无监督学习问题. k-均值聚类算法如下: 1.随机初始化簇中心 μ ...

  10. Solr学习总结 Solr的安装与配置

    接着前一篇,这里总结下Solr的安装与配置 1.准备 1.安装Java8 和 Tomcat9 ,java和tomcat 的安装这里不再重复.需要注意的是这两个的版本兼容问题.貌似java8 不支持,t ...