引入

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. 两个对象值相同(x.equals(y)==true),但却可有不同的hashcode这句话对吗?

    1.这句话当然不对啦,请参看官方文档给出的解释! hashCode public int hashCode()返回该对象的哈希码值.支持此方法是为了提高哈希表(例如 java.util.Hashtab ...

  2. CentOS 7 安装 bind 服务 实现内网DNS

    目录 安装 配置 服务管理 测试 安装 废话不多说,直接安装 yum install -y bind bind-utils 配置 [root@jenkins named]# rpm -ql bind ...

  3. node_export 安装

    目录 安装部署 环境准备 下载安装 启动测试 安装部署 环境准备 主机名 角色 IP 系统版本 内核版本 es01.k8s.com node01 10.0.20.11 CentOS 7.5 5.1.4 ...

  4. 教你如何提高 PHP 代码的质量

    说实话,在代码质量方面,PHP 的压力非常大.通过阅读本系列文章,您将了解如何提高 PHP 代码的质量. 我们可以将此归咎于许多原因,但这肯定不仅仅是因为 PHP 生态系统缺乏适当的测试工具.在本文中 ...

  5. Spring 读取资源

    Spring 读取资源 主要介绍3种方式(当然不止三种,但是这三种基本能应付大多需求)FileSystemResource:以文件的绝对路径方式进行访问ClassPathResourcee:以类路径的 ...

  6. Laravel 中使用 swoole 项目实战开发案例一 (建立 swoole 和前端通信)

    1 开发需要环境 工欲善其事,必先利其器.在正式开发之前我们检查好需要安装的拓展,不要开发中发现这些问题,打断思路影响我们的开发效率. 安装 swoole 拓展包 安装 redis 拓展包 安装 la ...

  7. 了解BootLoader——基于MPC5744P Bootloader例程

    一.BootLoader的作用:BootLoader是固化在PFlash中的一个程序,其作用可以分为两部分:boot和load. (1)boot:MCU上电时首先会运行BootLoader程序(因为它 ...

  8. linux终端界面的字颜色设置

    目录 目录 说明 PS1 颜色语法 保存设置 说明 在网上找了好多资料都不是很详细,要不就是语法有错误. 所以弄了好久才整明白了,写下来方便后面的人学习. 本人linux虚拟机版本为CentOs 6. ...

  9. GIS学习汇总

    GIS之家: Geoserver: geoserver安装部署步骤 geoserver发布地图服务WMS geoserver发布地图服务WMTS geoserver集成以及部署arcgis serve ...

  10. POJ 2186 Popular cows(SCC 缩点)

    Every cow's dream is to become the most popular cow in the herd. In a herd of N (1 <= N <= 10, ...