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

原文地址：https://www.cnblogs.com/alchemist-z/p/12233302.html