zoukankan      html  css  js  c++  java
  • 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'))
  • 相关阅读:
    微软经典项目实例
    Extjs在vs中使用及弹出对话框的介绍
    微软企业库5.0学习笔记(七)
    微软企业库5.0学习笔记(八)
    微软企业库5.0学习笔记(十)
    .NET 4 并行(多核)编程系列之五
    NET 应用架构指导 V2[12]
    .NET 4 并行(多核)编程系列之四
    .NET 4 并行(多核)编程系列之三
    微软企业库5.0学习笔记(十二)
  • 原文地址:https://www.cnblogs.com/alchemist-z/p/12233302.html
Copyright © 2011-2022 走看看