引入

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. python基础-网络编程part01

    软件开发架构 C/S(Client / Server) 架构 概念:是一种软件系统体系结构.Client是客户端,Server是服务端.客户端需要安装专用的客户端软件. 比如:微信.QQ.王者荣耀等应 ...

  2. 洛谷P2085——最小函数值

    题目描述 有n个函数,分别为\(F_1,F_2,...,F_n\).定义\(F_i(x)=A_i*x^2+B_i*x+C_i (x∈N*)\).给定这些\(A_i.B_i和C_i\),请求出所有函数的 ...

  3. Python使用itchat获取微信好友信息~

    最近发现了一个好玩的包itchat,通过调用微信网页版的接口实现收发消息,获取好友信息等一些功能,各位可以移步itchat项目介绍查看详细信息. 目标: 获取好友列表 统计性别及城市分布 根据好友签名 ...

  4. Apache服务——个人用户主页功能

    使用Apache服务部署静态网站(二) 个人用户主页功能 Apache服务程序中有个默认未开启的个人用户主页功能,能够为所有系统内的用户生成个人网站,确实很实用哦~ 第1步:开启个人用户主页功能: [ ...

  5. SQL 数字转为中文大写

    USE [SPECIAL_BLD]GO SET ANSI_NULLS ONGO SET QUOTED_IDENTIFIER ONGO CREATE FUNCTION [dbo].[get_upper] ...

  6. git删除中间某次提交

    git log获取commit信息 commit 58211e7a5da5e74171e90d8b90b2f00881a48d3a Author: test <test@36nu.com> ...

  7. Xcode10:The operation couldn’t be completed. (DVTCoreSimulatorAdditionsErrorDomain error 0.)

    目录 Xcode10 build success,但是模拟器Simulator不能正常启动,报错如下: 解决方案: Xcode10 build success,但是模拟器Simulator不能正常启动 ...

  8. Spring事物实例

    Spring事务实例: entity实体类: public class Accounts { private int accountid; private String accountname; pr ...

  9. BZOJ 3107 [cqoi2013]二进制a+b (DP)

    3107: [cqoi2013]二进制a+b Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 995  Solved: 444[Submit][Stat ...

  10. CoderForces-617B

    Bob has a favorite number k and ai of length n. Now he asks you to answer m queries. Each query is g ...