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

Posted alchemist-z

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘))

以上是关于react中,路由的使用。import {BrowserRouter,Switch,Route} from "react-router-dom";的主要内容,如果未能解决你的问题,请参考以下文章

十 React路由(react-router4.x): 动态路由get传值React中使用url模块

React开发中使用react-router-dom路由最新版本V5.1.2路由嵌套子路由

React开发中使用react-router-dom路由最新版本V5.1.2路由嵌套子路由

React 路由动态加载

React实现新闻网站--使用动态路由获取不同列表内容

React 路由懒加载的几种实现方案