引入

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 的区别的更多相关文章

  1. react路由嵌套

    所谓的嵌套路由就是在某些以及路由下面存在二级路由,这些二级路由除了公用一级路由导航模块外,还公用当前的二级路由的导航模块,也就是部分进行了切换,要实现嵌套路由,首先回顾之前的内容,实现基本的react ...

  2. React路由-基础篇

    React-Router-DOM ReactRouter网址, 安装 -npmjs找到react-router-dom -yarn add react-router-dom 基本使用方法 1.创建一个 ...

  3. react 路由 react-router@3.2.1

    react路由,4.x的差异还是比较大,暂时还是3.x的版本 安装: npm install -S react-router@3.x 配置: import { Router, Route, hashH ...

  4. 【React 8/100】 React路由

    React路由 React路由介绍 现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序.因为它的用户体验更好.对服务器压力更小,所以更受欢迎.为了有效的使用单个页面来管 ...

  5. 我的一个react路由之旅(步骤及详图)

    今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的 ...

  6. 简单的说一下react路由(逆战班)

    现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生. 前 ...

  7. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

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

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

  9. react 路由 react-router-dom

    import React from 'react'; import DataList from './data' import Tr from './Tr' // import One from '. ...

随机推荐

  1. RocketMQ 多副本前置篇:初探raft协议

    目录 1.Leader选举 1.1 一轮投票中,只有一个节点发起投票的情况 1.2 一轮投票中,超过一个节点发起投票的情况 1.3 思考如何实现Raft选主 2.日志复制 Raft协议是分布式领域解决 ...

  2. 1、Docker 简介

    目录 Docker 起源 Docker 架构 特性 局限 名称空间隔离 原理 Control Groups (cgroups) Docker Docker 啥是docker? Docker 是一个开源 ...

  3. 深入理解inode和硬链接和软连接和挂载点

    inode 一.inode是什么? 理解inode,要从文件储存说起. 扇区 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5 ...

  4. vue如何引入图片地址

    我们在用vue时储存图片时,一般把图片放在两种文件下,一个是static文件夹下,另外一个是assets文件夹下. 下面总体说一下这两个的区别及正确的引用方式: static是放不会变动的图片(或文件 ...

  5. VLAN实验1(VLAN基础配置及Access接口)

    本实验基于<HCNA网 络技术实验指南> 本实验使用eNSP软件 原理概述: 早期的局域网技术是基于总线型结构的.总线型拓扑结构是由一根单电缆连接着所 有主机,这种局域网技术存在着冲突域问 ...

  6. 安装部署MySQL主从复制

    Environment:{ CentOS 7 两台  安装MySQL(mariadb  mariadb-server) } !!!关闭防火墙SELinux 1.查看版本信息 2.启动mysql服务,查 ...

  7. 面试一个小公司,TPM相关概念

    准备面试一个小公司,在面试邀请邮件中提出了这样一个要求(not required): ".. one item we will likely discuss with you is soft ...

  8. 关于软件定义IT基础设施的未来,深信服是这么思考的

    在今年的深信服创新大会上,软件定义IT基础设施成为非常重要的议题之一,深信服与2,000余位客户的CIO和合作伙伴一起围绕IT基础设施在数字化时代中的作用与价值进行了深入的探讨. 此外,深信服还联合I ...

  9. 转:spring aop 拦截业务方法,实现权限控制

    难点:aop类是普通的java类,session是无法注入的,那么在有状态的系统中如何获取用户相关信息呢,session是必经之路啊,获取session就变的很重要.思索很久没有办法,后来在网上看到了 ...

  10. Java基础面试相关

    面试相关的问题(下) 四 Linux高级_ 1.Linux机器 变慢,怎么查看? (1)整机的性能 主要查看的是CPU和内存 先查看整机的top,使用命令 top 虚拟机 使用1可以查看哪个核被占用过 ...