Semantic-UI Sidebar.Pusher 导致反应路由器重新渲染其组件答案

【问题标题】：Semantic-UI Sidebar.Pusher causing react router to rerender its componentSemantic-UI Sidebar.Pusher 导致反应路由器重新渲染其组件
【发布时间】：2017-12-17 10:12:32
【问题描述】：

我正在使用 react 路由器和语义 UI 侧边栏。当侧边栏在可见和不可见之间切换时，路由器会触发其组件 (OilBarrelComponent) 被重新创建（而不仅仅是“推送”）。这似乎没有必要，并且有我不想要的副作用。我的代码是否有问题导致 OilBarrelContainer 组件因为我切换侧边栏而被重新创建？

import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';
import {Sidebar, Segment, Button, Menu, Icon} from 'semantic-ui-react'

  toggleSidebarVisibility = () => this.setState({ sidebarVisible: !this.state.sidebarVisible })

  render() {
    const { sidebarVisible } = this.state

    return (
    <Router history={history}>
      <div>
        <Sidebar.Pushable className="phsidebar" as={Segment}>
          <Sidebar as={Menu} animation='push' width='thin'  visible={sidebarVisible} icon='labeled' vertical inverted>
            <Menu.Item className="sidebaritem" as={Link} to='/oilbarrel'>
              Gauge
            </Menu.Item>
          </Sidebar>
          <Sidebar.Pusher>
            <div>
              <MessagesContainer/>
              <Switch>
                <Route exact path="/" component={() => (<Home />)}/>
                <Route exact path="/oilbarrel" component={() => (<OilBarrelContainer timer={true} topMargin={0} width={300} height={400} labelText={"Diesel"}/>)}/>
              </Switch>
            </div>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>

    </Router>
    )};

【问题讨论】：

标签： reactjs react-router semantic-ui react-router-dom semantic-ui-react

【解决方案1】：

我怀疑是您的<Route> 的component 道具是函数，而不仅仅是对组件类的引用。

即而不是

component={() => (<Home />)}

我认为应该是

component={Home}

我相信前一种方式在每次渲染时都会重新渲染一个全新的组件，因此 React 无法断言重新渲染是不必要的。

【讨论】：