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