react中，路由的使用。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'

// 引入自定義好的組件

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