switch组件的使用

// import axios from 'axios'
import React, {
    Component
} from 'react'
import {Link,Route,Switch} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Login from './components/Login'
import "./index.css"
class App extends Component {
    render() {
        return ( 
            <div>
            <div className="box">
               <div className="box_list">
                <div>
                  <Link to="/home"> 主页</Link>
                </div>
                <div>
                 <Link to="/about">关于</Link> 
                </div>
               </div>
               <div className="box_content">
               <Switch>
               <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/about" component={Login}/>
               </Switch>
               </div>
            </div>
            </div>
        )
    }
}
export default App

用switch包裹路由可以使得同一路径匹配不同的组件时可以只匹配第一个组件