引入

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. 使用最新AndroidStudio编写Android编程权威指南(第3版)中的代码会遇到的一些问题

    Android编程权威指南(第3版)这本书是基于Android7.0的,到如今已经过于古老,最新的Android版本已经到10,而这本书的第四版目前还没有正式发售,在最近阅读这本书时,我发现这本书的部 ...

  2. OSI案例详解+ARP+DNS

    案例,淘宝买东西 DNS 域名的作用其实就是相对ip地址来说更好记忆和识别,DNS就是根据域名解析出ip 一次请求,DNS解析的过程 1.在浏览器输入一个域名,操作系统首先会检查自己的本地hosts文 ...

  3. js中this的使用及代表意义

    我们在js中经常看到this这个关键字,那么他是什么呢?它可以是全局对象.当前对象,也可以是任意对象,函数的调用方式决定了 this 的值. 1. 方法中的this. 在对象方法中, this 指向调 ...

  4. MySQL主从扩展知识

    6月29/7月2日任务 说明:这两天无新课,主要是扩充知识面注意:这两天的任务,需要回专贴.需要你们通过看这些东西总结成自己的心得. 不能照搬,必须要自己理解,能看多少就看多少,看不完也没有关系,但一 ...

  5. 《Windows内核安全与驱动开发》阅读笔记 -- 索引目录

    <Windows内核安全与驱动开发>阅读笔记 -- 索引目录 一.内核上机指导 二.内核编程环境及其特殊性 2.1 内核编程的环境 2.2 数据类型 2.3 重要的数据结构 2.4 函数调 ...

  6. 用.NET解索尼相机ARW格式照片

    用.NET解索尼相机ARW格式照片 目前常用的照片格式是.jpg,它只能提供8bit的色彩深度,而目前主流的相机都能提供高达12bit-14bit的色彩深度,动态范围和后期处理能力也大大增加,这也是为 ...

  7. 每个开发人员都应该知道的11个Linux命令

    本文主要挑选出读者有必要首先学习的 11 个 Linux 命令,如果不熟悉的读者可以在虚拟机或云服务器上实操下,对于开发人员来说,能熟练掌握 Linux 做一些基本的操作是必要的! 事不宜迟,这里有 ...

  8. 详解TCP连接的“三次握手”与“四次挥手”(上)

    一.TCP connection 客户端与服务器之间数据的发送和返回的过程当中需要创建一个叫TCP connection的东西: 由于TCP不存在连接的概念,只存在请求和响应,请求和响应都是数据包,它 ...

  9. iOS开发-CoreMotion框架

    转自: CoreMotion是一个专门处理Motion的框架,其中包含了两个部分 加速度计和陀螺仪,在iOS4之前加速度计是由 UIAccelerometer 类 来负责采集数据,现在一般都是用Cor ...

  10. 设计模式GOF23(结构型模式:代理模式,适配模式,桥接模式,组合模式,装饰模式,外观模式,享元模式)

    结构型模式: – 分类: • 适配器模式.代理模式.桥接模式.装饰模式.组合模式.外观模式.享元模式 – 核心作用:是从程序的结构上实现松耦合,从而可以扩大整体的类结构,用来解决更大的问题.   结构 ...