import React from "react";
import ReactDom  from "react-dom";
import {BrowserRouter,Switch,Route}  from "react-router-dom";
import './style/index.scss'
// 引入自定义好的组件
import  Header from "./component/Header";
import  Swiper from "./component/Swiper";
import Foot from "./component/Foot";
import Login from "./component/Login";
 

const MIUI = ()=> (<Swiper />)
const login = ()=> (<Login />)
const routes = (
    // 路由容器     BrowserRouter中只能存在一个子元素 
        // 如有多个子元素,则需要一个父容器将多个子元素全部包裹,否则报错
    <BrowserRouter>
        <div>
            <Header />  
            {/* 将每个路由都需要的组件写在Switch组件外,例如<Header /> 和 <Foot /> */}
            {/* 将需要路由的组件写在双标签Switch中,并使用单标签Route,将定义好的组件给到component */}
            {/* 如果不使用exact = {true} 这条语句,
            那么'/MIUI'和'/MIUI/01'都将匹配到'/MIUI'页面,不会进入'/MIUI/01' */}
            <Switch>
                 <Route path = "/" exact = {true} component = { myHome } />
                 <Route path = "/MIUI" exact = {true} component = { MIUI } />
                 <Route path = "/login" exact = {true} component = { login } />
            </Switch>
            <Foot />
        </div>
    </BrowserRouter>
)
ReactDom.render( routes, document.getElementById('root'))

react中,路由的使用。import {BrowserRouter,Switch,Route} from "react-router-dom";的更多相关文章

  1. React中路由的基本使用

    现在我们来搞一搞React中的路由吧,别问我为什么这木喜欢用搞这个字,因为它比较深奥. 注意下面我们使用的是React-Router-DOM React中的路由基本使用还是满简单的,零碎的小东西有点多 ...

  2. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...

  3. react中路由的跳转

    1.react-router-dom 使用react-router-dom 4.4.2 在页面中直接使用 引入 i mport { Link } from 'react-router-dom' 使用 ...

  4. react中路由跳转push与replace的区别

    路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...

  5. react中路由不起作用的奇怪现象

    同样的两段Router代码,为什么一段正常,一段不起作用(也没有任何错误log提示) 瞪着眼观察也看不出为什么... 通过选中高亮显示内容相同, 为何就是有一段路由不管用呢? 折腾半天发现... 大小 ...

  6. react中使用redux简易案例讲解

    为什么我想要使用redux? 前段时间初步上手了react,最近在使用react的过程中发现对于组件之间通信的需求比较迫切,尤其是在axios异步请求后端数据的时候,这样的需求是特别强烈的!举个例子: ...

  7. [React] Create a Query Parameter Modal Route with React Router

    Routes are some times better served as a modal. If you have a modal (like a login modal) that needs ...

  8. react之路由

    功能:让用户从一个视图(组件)导航到另一个视图(组件) 前端路由是一套映射规则,在React中,是URL路径与组件的对应关系 使用React路由简单来说,就是配置路径和组件 路由的使用 1.安装路由 ...

  9. react系列(五)在React中使用Redux

    上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...

随机推荐

  1. 洛谷$P$3160 局部极小值 $[CQOI2012]$ 状压$dp$

    正解:状压$dp$ 解题报告: 传送门! 什么神仙题昂,,,反正我是没有想到$dp$的呢$kk$,,,还是太菜了$QAQ$ 首先看数据范围,一个4×7的方格,不难想到最多有8个局部极小值,过于显然懒得 ...

  2. 机器学习-Pandas 知识点汇总(吐血整理)

    Pandas是一款适用很广的数据处理的组件,如果将来从事机械学习或者数据分析方面的工作,咱们估计70%的时间都是在跟这个框架打交道.那大家可能就有疑问了,心想这个破玩意儿值得花70%的时间吗?咱不是还 ...

  3. C++ 模板常见特性(函数模板、类模板)

    背景 C++ 是很强大,有各种特性来提高代码的可重用性,有助于减少开发的代码量和工作量. C++ 提高代码的可重用性主要有两方面: 继承 模板 继承的特性我已在前面篇章写过了,本篇主要是说明「模板」的 ...

  4. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  5. linux入门系列4--vi/vim编辑器

    上一篇文章"linux入门系列3--linux远程登陆工具"讲解了如何使用常用的工具远程连接和管理linux服务器,要管理服务器必然会涉及到脚本文件的创建.编辑工作,因此在介绍命令 ...

  6. Django框架之数据库ORM框架

    首先,我来介绍一下什么是ORM框架: O是object,也就类对象的意思,R是relation,翻译成中文是关系,也就是关系数据库中数据表的意思,M是mapping,是映射的意思.在ORM框架中,它帮 ...

  7. 【转】[ppurl]从”皮皮书屋”下载电子书的姿势

    转:http://blog.csdn.net/hcbbt/article/details/42072545 写在前面的扯皮 为什么标题的”皮皮书屋”加上了引号,因为皮皮书屋(http://www.pp ...

  8. Queue and deque

    Queue : 队列 队列(Queue)是常用的数据结构,可以将队列看成特殊的线性表,队列限制了对线性表的访问方式:只能从线性表的一端添加(offer)元素,从另一端取出(poll)元素. 队列遵循先 ...

  9. Java 成员变量与局部变量

    成员变量与局部变量的区别 什么是局部变量.什么是成员变量: 局部变量:在方法内部的变量 形参:在方法签名中定义的变量. 方法局部变量:在方法内部定义的变量. 代码块局部变量:在代码块内定义的变量. 成 ...

  10. qiniuLive 连麦流程介绍

    本文出自APICloud官方论坛 qiniuLive 封装了七牛直播云服务平台的移动端开放 SDK.该模块包括视频流采集和视频流播放两部分 iOS连麦流程图: Android连麦流程图: 以下部分代码 ...