react学习---switch的使用

                1.通常情况下，path和component是一一对应的关系。

                2.Switch可以提高路由匹配效率(单一匹配)。

 

Switch只显示匹配到的第一个路由

import React,{Component} from 'react';
import {HashRouter as Router,Route,Link,Switch } from 'react-router-dom';
import Main from './Main';
import About from './About';
import Topic from './Topic';
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <Router>
                <div>
                <ul>
                    <li>
                        <Link to="/">main</Link>
                    </li>
                    <li>
                        <Link to="/about">about</Link>
                    </li>
                    <li>
                        <Link to="/topic">topic</Link>
                    </li>
                </ul>
                <hr />
                {/* {this.props.children} */}
                </div>
                {/* Switch匹配到第一个路由就不会继续匹配了,
                如果不加Route 里不加 exact，那么凡是Link里面 to 的路径包含了/，
                那么就会被匹配到，于是Switch就不继续匹配下去
                
                */}
                <Switch>
                    <Route  exact path="/" component={Main}></Route>
                    <Route  path="/about" component={About}></Route>
                    <Route  path="/topic" component={Topic}></Route>
                </Switch>
            </Router>
            
        );
    }
}

export default Home;

执行结果：点击哪个链接就能出来相应的页面

Switch匹配到第一个路由就不会继续匹配了,