前端路由（四）-Switch组件与exact属性——Switch组件-保证中间的路由映射仅仅匹配一个 & exact属性-精确匹配

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启动项目，页面如下：