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路由嵌套子路由