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'))