Switch组件与exact属性——Switch组件-保证中间的路由映射仅仅匹配一个 & exact属性-精确匹配
- Switch作用:保证中间的路由映射仅仅匹配一个,如果有多个匹配,以最先匹配的为准
如果Route组件没有path,会作为默认显示的组件 - Route组件中exact属性的作用:路径进行精确匹配,不会存在包含关系(比如:/about 路径不会匹配 / 路径)
<Switch>
<Route path='/' exact component={Home}/>
<Route path='/info' component={News}/>
<Route path='/tech' component={Tech}/>
<Route component={NoMatch}/>
</Switch>
实例
第一步:安装依赖包
npm install react-router-dom -D
第二步:在APP.js同层级的component下新建router文件夹,其下新建文件03.js
第三步:在App.js中进行导入
import React from 'react';
import BaseRouter from './component/router/03.js'
function App () {
return (
<div>
<BaseRouter/>
</div>
)
}
export default App;
component/router/03.js文件如下
/*
路由的匹配模式
exact 属性的作用:精确匹配路由的路径,不存在包含关系
*/
import React from 'react'
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom'
function Home () {
return <div>Home</div>
}
function Tech () {
return <div>Tech</div>
}
function Edu () {
return <div>Edu</div>
}
function NotFound () {
return <div>页面被狗狗叼走了</div>
}
class BaseRouter extends React.Component {
render () {
return (
<BrowserRouter>
<div>
<div>基础路由</div>
<hr/>
{/*路由链接*/}
<Link to='/'>主页</Link>
<Link to='/tech'>科技</Link>
<Link to='/edu'>教育</Link>
<Link to='/edu1'>404</Link>
{/*路由组件显示的位置*/}
<Switch>
<Route path='/' exact component={Home}/>
<Route path='/tech' component={Tech}/>
<Route path='/edu' component={Edu}/>
{/*默认匹配组件*/}
<Route component={NotFound}/>
</Switch>
</div>
</BrowserRouter>
)
}
}
export default BaseRouter
npm run start启动项目,页面如下: