React路由的使用 Redirect默认展示某一个页面 Switch找到停止 BrowserRouter和HashRouter 的区别
引入
Redirect 默认展示某一个页面
Switch 一旦找到 路由 就停止 不会在往下找了
App.js
import {Link,Route,NavLink,Redirect,Switch} from "react-router-dom"
<NavLink to="/chuli" activeClassName="demo">Chuli</NavLink>
<NavLink to="/clock" activeClassName="demo">Clock</NavLink>
<Switch>
<Route path="/Chuli" component={Chuli}></Route>
<Route path="/Clock" component={Clock}></Route>
<Redirect to="/chuli"></Redirect> //默认展示chuli页面
</Switch>
BrowserRouter 这一种 兼容性不好 多次刷新的时候 css样似可能会丢失
HashRouter 这一种兼容好 但是有锚点
如何解决 BrowserRouter的缺点
使用连接的时候 加上 %PUBLIC_URL%
home.css 在public目录下
<link rel="stylesheet" href="%PUBLIC_URL%/home.css"> 可以解决
<link rel="stylesheet" href="./home.css"> 失败
在react中 ./ 和 / 区别不同 /表示从项目暴露的资源目录开始查找
React路由的使用 Redirect默认展示某一个页面 Switch找到停止 BrowserRouter和HashRouter 的区别的更多相关文章
- react路由嵌套
所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...
- React路由-基础篇
React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...
- react 路由 react-router@3.2.1
react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...
- 【React 8/100】 React路由
React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...
- 我的一个react路由之旅(步骤及详图)
今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...
- 简单的说一下react路由(逆战班)
现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前 ...
- react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)
第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- react 路由 react-router-dom
import React from 'react'; import DataList from './data' import Tr from './Tr' // import One from '. ...
随机推荐
- drf目录
drf目录 1 web接口与restful规范 2 django中的restful规范 3 CBV请求分析 4 请求模块分析 5 响应模块分析 6 异常模块 7 解析模块 8 序列化类 9 视图组件 ...
- CentOS 7 安装 bind 服务 实现内网DNS
目录 安装 配置 服务管理 测试 安装 废话不多说,直接安装 yum install -y bind bind-utils 配置 [root@jenkins named]# rpm -ql bind ...
- 最小化安装CentOS 7 系统
目录 CentOS 程序准备 开始安装系统 创建虚拟机 安装系统 CentOS 运维最常接触的系统就是CentOS系统,无论是版本 6 还是版本 7 而且在安装系统时,讲究最小化安装系统,之后当需要什 ...
- centos7.6安装python3.7
1.安装python3.7后,需要: yum install libffi-devel -y 然后再到python源码目录再make install 重新编译一下. 否则pip安装一些包时会安装不上, ...
- List接口下的集合
集合框架 List接口下的集合特点: Set接口下的集合特点: 1.都是有序的 1.都是无序的 2.都有下标 2.没有下标 3.都可以重复 3.不可重复(覆盖) List接口下的集合 1.ArrayL ...
- [动图演示]Redis 持久化 RDB/AOF 详解与实践
Redis 是一个开源( BSD 许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件.它支持的数据类型很丰富,如字符串.链表.集 合.以及散列等,并且还支持多种排序功能. 什么叫持 ...
- 华为参与《基于5G技术的医院网络建设标准》的制定
[摘要] 5G 千兆网承载五地远程会诊,现场完成三例复杂性疑难重症远程病例讨论 [中国,北京,2019年9月4日] 金秋之际,在国家卫生健康委指导下,由中日友好医院•国家远程医疗与互联网医学中心•国家 ...
- 创建raid10(五块磁盘)
创建raid10(五块磁盘) Raid10(5块磁盘) 上一个bolg已经做了raid5(3 个raid. 2个备份),在此条件下继续以下步骤: 1.先将磁盘系统卸载 2.看系统挂载里是否还有md0 ...
- mac版 sublime快捷键大全
按这几大类分类:文件 编辑 选择 查找 视图 去往 工具 项目 窗口 帮组一.文件cmd + N 新建文件cmd + S 保存文件cmd + shift + S 文件另存为cmd + alt + S ...
- POJ 3281 Dining(网络流-拆点)
Cows are such finicky eaters. Each cow has a preference for certain foods and drinks, and she will c ...