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. Spring Boot入门(一)

    Spring Boot入门 一.第一个Spring Boot程序 1.导入springBoot 依赖 <parent> <groupId>org.springframework ...

  2. 详解js的bind、call、apply

    详解js的bind.call.apply 说明 虽然bind.call.apply都是js很基础的一块知识,但是我从未认真总结过这三者的区别. 由于公司后端是用的微服务架构,又没有中间层对接,导致前端 ...

  3. 《美国纽约摄影学院摄影教材》PDF教材

        下载地址: 美国纽约摄影学院摄影教材(上册).pdf 美国纽约摄影学院摄影教材(下册).pdf 欢迎你到纽约摄影学院来,我们急切地等待着开课,你们也在 跃跃欲试了.那就让我们马上开始吧! 你已 ...

  4. 在nginx服务器里面搭建好node.js本地服务器后,利用Node.js的FS模块,实现简单数据的写入和读取

    先在server.js里面引入: var fs = require('fs');   然后写入  // 往writeme.txt文件 写入一些内容     fs.writeFile('./writem ...

  5. JVM之GC(一)

    Java较C而言,最大的区别在于内存管理.JVM设有无用内存空间自动回收复用机制,也就是我们所说的GC. 之前说过,栈是为线程.为函数的执行分配内存的地方,用完即“销毁”,这里留待以后做深入探讨:堆是 ...

  6. Map and HashMap

    1.1.1. Map 接口 java提供了一组可以以键值对(key-value)的形式存储数据的数据结构,这种数据结构称为Map.我们可以把Map看成一个多行两列的表格,其中第一列存放key,第二列存 ...

  7. 【记】创建 VirtualBoxClient COM 对象失败. 应用程序将被中断

    1. 在本地64位win7系统安装VirtualBox完,启动时提示错误 原因:兼容性造成的 按照下图显示修改VirtualBox快捷方式的兼容性 2. 启动虚拟机时,提示 点击弹出框的确定按钮后,接 ...

  8. 原生JavaScript实现评分效果

    一.实现原理: 1.要设置一个“大总管变量”,用于记录点击时的星星下标,只声明不赋值. 2.移入每个星星时,先把所有的星星恢复到默认状态:再把当前星星及在它之前的星星设为选中状态. 3.移出每个星星时 ...

  9. php5.6.39 源码安装

    1 安装依赖库 yum install -y autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel li ...

  10. cogs 1829. [Tyvj 1728]普通平衡树 权值线段树

    1829. [Tyvj 1728]普通平衡树 ★★★   输入文件:phs.in   输出文件:phs.out   简单对比时间限制:1 s   内存限制:1000 MB [题目描述] 您需要写一种数 ...