React路由中Switch的使用【提高效率】

DC...

已于 2022-07-26 15:57:41 修改

阅读量1k

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2022-07-26 15:56:49 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63779088/article/details/125996711

版权

React 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了React Router中Switch组件的作用，它通过确保路由的唯一渲染，避免了多个组件同时加载的问题，显著提高程序性能。重点讲解了一对一的path和component关系，以及如何在代码中有效利用Switch实现单一匹配。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React路由中的Switch

switch功能

为了解决route的唯一渲染，它是为了保证路由只渲染一个路径。

如果没有Switch组件，当一个path匹配到多个component时，会渲染出多个组件。一个路径在匹配到了对应的component之后，还会接着向下匹配，会大大的影响效率。

重点

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

将普通的Route组件包含在switch组件之中，当path匹配到一个component之后，将不会再向下继续匹配，提高了程序效率（单一匹配）

switch代码展示

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import About from './pages/About/About'
import Home from './pages/Home/Home'
import Header from './components/Header/index'
import MyNavLink from './components/MyNavLink/index'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              <MyNavLink to="/about" title="About" />
              <MyNavLink to="/home" title="Home" />
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Route path="/home" component={About} />
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}