上节课我们介绍了如何封装NavLink从而来减少代码冗余，那么这节课我们来介绍一下如何来使用Switch

回顾

在开始这节课的内容之前我们对上节课的内容来做一个简单的回顾。

  • 标签体内容是一个特殊的props属性
  • 用批量传入props来减少代码冗余

以上便是上节课的主要内容，我们接下来开始介绍Switch的使用

问题

现在我们的案例虽然说功能都实现了，大多数部分也都完成了，但是我们来思考一个问题：

// Test 组件
export default class Test extends Component {
  render() {
    return (
      <h3>Test....</h3>
    )
  }
}
// App 组件
export default class App extends Component {
  render() {
    return (
      <div>
        ...
              <div className="panel-body">
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
                <Route path="/home" component={Test} />
              </div>
         ...
    );
  }
}

我们在App组件中注册了两个相同路径的路由，但是展示的却是不同的组件。那么我们点击了Home会展示哪个组件呢？

image-20220114102536991

实际上呢这两个组件都展示了。但是我们正常的情况下我们都会让一个路径只对应一个组件。但是现在这个情况为什么会两个组件都展示？

因为路由的路径匹配是按顺序进行的，如果我们点击了Home，路径也就变成了/home，那么就从头往下匹配，首先匹配了/about，发现不匹配，然后继续往下，发现/home匹配上了，展示Home组件，但是到这匹配并没有停止，而是继续往下匹配到了第二个/home路径。然后发现也匹配，就展示了Test组件。

那么如果我有很多个路由，这样一趟匹配下来，是不是就会有很严重的效率问题啊？既然我们正常情况下都是一个路径对应一个组件，那么我们肯定就是希望如果我们匹配到路径之后就不在往下匹配了啊，不然效率也太低了。那么我们就要引入Switch

export default class App extends Component {
  render() {
    return (
      <div>
        ...
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Route path="/home" component={Test} />
                </Switch>
         ...
      </div>
    );
  }
}

我们来看代码，我们直接用Switch组件来把我们的所有路由都包裹起来，这样的话只要匹配到路径就不在往下匹配了。我们来看一下效果：

image-20220114103946900

这一次只展示了Home组件，并没有展示Test组件。

总结

  • 正常情况下一个路径只对应一个组件
  • 当有多个路由时可以通过Switch来使路由匹配到路径之后就终止继续往下匹配
  • Switch可以提高路由匹配效率。

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/use_switch/