引入

Redirect 默认展示某一个页面

Switch 一旦找到 路由 就停止 不会在往下找了

  1. App.js
  2. import {Link,Route,NavLink,Redirect,Switch} from "react-router-dom"
  3. <NavLink to="/chuli" activeClassName="demo">Chuli</NavLink>
  4. <NavLink to="/clock" activeClassName="demo">Clock</NavLink>
  5. <Switch>
  6. <Route path="/Chuli" component={Chuli}></Route>
  7. <Route path="/Clock" component={Clock}></Route>
  8. <Redirect to="/chuli"></Redirect> //默认展示chuli页面
  9. </Switch>
  10. BrowserRouter 这一种 兼容性不好 多次刷新的时候 css样似可能会丢失
  11. HashRouter 这一种兼容好 但是有锚点
  12. 如何解决 BrowserRouter的缺点
  13. 使用连接的时候 加上 %PUBLIC_URL%
  14. home.css public目录下
  15. <link rel="stylesheet" href="%PUBLIC_URL%/home.css"> 可以解决
  16. <link rel="stylesheet" href="./home.css"> 失败
  17. 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. 【RN - 基础】之Text使用简介

    基本用法 Text组件是React Native中的一个重要组件,相当于iOS中的UILabel和Android中的TextView.Text组件用来存放文本数据.下面是一个简单的例子: import ...

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

    目录 安装 配置 服务管理 测试解析 安装 废话不多述,上来就安装 yum install -y bind-utils dnsmasq 配置 [root@jenkins ~]# rpm -ql dns ...

  3. 英语口语考试资料Food

    新东方推荐文章:Food and Health The food we eat seems to have profound effects on our health. Although scien ...

  4. udp协议以及socketserver

    udb协议 udb协议也是一种协议,它和tcp相比既有缺点也有优点 udb协议所发送的数据可以理解为自带报头,所以他不会出现粘包的情况.但是udp数据只管发送而不管接收,也就是说udp会出现丢包的情况 ...

  5. 配置Tomcat监听80端口、配置Tomcat虚拟主机、Tomcat日志

    6月27日任务 16.4 配置Tomcat监听80端口16.5/16.6/16.7 配置Tomcat虚拟主机16.8 Tomcat日志扩展邱李的tomcat文档 https://www.linuser ...

  6. 格式化JS代码

    平常在项目中经常会遇到下载别人的js文件都是加密过的,不方便阅读都是一整行, 个人无法进行阅读,浏览器能够识别出来,所以就可以使用浏览器进行格式化js代码: 1.打开浏览器chrome为例,打开使用j ...

  7. Python存储数据的方式

    在Python开发中,数据存储.读取是必不可少的环节,而且可以采用的存储方式也很多,常用的方法有json文件.csv文件.MySQL数据库.Redis数据库以及Mongdb数据库等. 1. json文 ...

  8. ThinkPHP3.2.2实现持久登录(记住我)功能的方法

    实现持久登录,即用户在登录时,勾选了"记住我"之后,无论是否关闭浏览器,只要不退出登录,在指定的时间内始终保持登录状态(缺点是在另一台电脑上登录过后,之前那台电脑就不能继续保持登录 ...

  9. for循环使用element的折叠面板遇到的问题-3

    需求:for循环渲染上去的表单怎么使用element的表单校验 之前做这个的时候,死活绑不上去,不知道哪里出了问题,后来解决办法是prop要注意用拼接,使它和索引的变量一致 <el-form-i ...

  10. ruby方法名之命名方式

    上一篇博文 ruby传参之引用类型 里边定义了一个方法名 modify_my_object!,这个方法名是以 ! 结尾,在 ruby 的对象里边是用于表达修改本身的意思. 比如 String#gsub ...