react中，路由的使用。import {BrowserRouter,Switch,Route} from "react-router-dom";

Posted 2021-03-13 alchemist-z

 

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