通过之前的博客介绍,对于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. spring boot开发为什么使用jar包

    spring boot既可以打成war发布,也可以找成jar包发布. jar包:直接通过内置tomcat运行,不需要额外安装tomcat.如需修改内置tomcat的配置,只需要在spring boot ...

  2. Activiti工作流与spring集成

    一.前言 前面Activiti工作流的学习,说明了Activiti的基本应用,在我们开发中可以根据实际的业务参考Activiti的API去更好的理解以及巩固.我们实际的开发中我们基本上都使用sprin ...

  3. 【转载】showModalDialog returnValue is undefined in Google Chrome

    showModalDialog returnValue is undefined in Google Chrome Posted on August 22, 2012by briancaos For ...

  4. Oracle邮件推送函数

    CREATE OR REPLACE PROCEDURE PROCSENDEMAIL ( P_TXT VARCHAR2, P_SUB VARCHAR2, P_SENDOR VARCHAR2, P_REC ...

  5. LeetCode——Integer Break

    Question Given a positive integer n, break it into the sum of at least two positive integers and max ...

  6. P4开源Tutorials教程样例实战及对P4v1.1规范的初分析

    Github链接:Github-P4Lang-Tutorials-p4v1.1 前言 本文主要对Barefoot开源教程中的p4v1.1实例simple_router的实战步骤进行记录与阐述,希望能帮 ...

  7. 51Nod 1521 一维战舰

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1521 思路:先计算出一开始最多能放多少艘战舰,然后每次输入一个点后,找到 ...

  8. spring boot2.1读取 apollo 配置中心2

    第二篇:创建spring boot2.1项目 引用apollo的java客户端jar包 <dependency> <groupId>com.ctrip.framework.ap ...

  9. IIS服务器管理学习

    工欲善其事必先利其器 首先给服务器配上强力的软件,用于安全防护和监控. 公司服务器用的阿里云的ECS,已经有防护和监控了,之后又选择额外加了一个安全狗 为了监控服务器上系统的各项运行指标,又买了听云平 ...

  10. python脚本11_求10万以内所有素数

    #求10万以内所有素数 num = int(input(">>>")) strs = '' for i in range(2,num): for c in ran ...