1. 文章
  2. 前端
  3. 文章详情

使用Switch标签解决React相同Router被重复渲染问题

发布于5年前(2018-12-25) 分类：前端  阅读(8.6k)  评论次数(0)
使用Switch标签解决React相同Router被重复渲染问题
在写React项目的时候，遇见了组件被重复渲染的现象。我是如何解决的呢？使用switch标签包裹就解决了，如下是使用和不使用switch标签的对比示例：

当路由BrowserRouter中出现了多个相同的Route时组件会被重复渲染，代码：

<BrowserRouter>
            <div className="main">
                <Menu/>
                <Route exact path="/" component={Home}/>
                <Route path="/home" component={Home}/>
                <Route path="/about" component={About}/>
                <Route path="/about" component={About}/>
                <Footer/>
            </div>
        </BrowserRouter>

效果如图：
不使用switch标签出现重复渲染效果

当使用了<switch>标签包裹时：

<BrowserRouter>
    <div className="main">
        <Menu/>
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/home" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/about" component={About}/>
        </Switch>
        <Footer/>
    </div>
</BrowserRouter>

效果图如下：
使用switch标签后不被重复渲染效果

说明：当使用<Switch>标签时，相同的<Route>只匹配第一个。如果不使用<Switch>，相同的<Route>都将会被渲染。为了避免组件被重复渲染的情况，配置路由的时候最好使用<Switch>包裹。

the end

标签： react router
上一篇:   在CentOS7服务器上编译源码安装Node.js
下一篇:   react项目报错link is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML
热门文章