react, the route to use. import {BrowserRouter, Switch, Route} from "react-router-dom";

 

import React from "react";

import ReactDom  from "react-dom";

import {BrowserRouter,Switch,Route}  from "react-router-dom";

import './style/index.scss'

// imports from defined components

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 = (

    // routing container BrowserRouter There can only be one child 

        // If there are multiple sub-elements, you need a parent container multiple sub-elements all wrapped, otherwise an error

    <BrowserRouter>

        <div>

            <Header />  

            {/ * The components of each route needs to write out Switch assembly, e.g. <Header /> and <Foot /> * /}

            {/ * Write the need to route in the ditag Switch assembly and use the Route single-label, to the defined component to component * /}

            {/ * If no exact = {true} This statement,

            So '/ MIUI' and '/ MIUI / 01' will match to '/ MIUI' page, do not enter '/ 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'))