의미-UI 사이드바.푸셔로 인해 반응 라우터가 해당 구성 요소를 리렌더하도록 함

의미-UI 사이드바.푸셔로 인해 반응 라우터가 해당 구성 요소를 리렌더하도록 함

나는 반응 라우터와 의미-의 사이드바를 사용하고 있다.사이드바를 볼 수 있는 것과 보이지 않는 것 사이를 전환할 때, 라우터는 그 구성요소를 트리거한다(OilBarrelComponent)를 재현할 것(단순히 'pushed'하지 않는다).이것은 불필요해 보이고 내가 원하지 않는 부작용이 있다.내 코드에 문제가 있어서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>
    )};

네 말이 맞는 것 같다.<Route>의component소품은 단순히 구성요소 클래스에 대한 참조가 아니라 기능이다.

즉, 대신

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

그래야 한다고 생각한다.

component={Home}

나는 이전 방식이 모든 렌더에 완전히 새로운 요소를 다시 렌더링하기 때문에 리액션이 리렌더가 불필요하다고 주장할 방법이 없다고 생각한다.

참조URL: https://stackoverflow.com/questions/45066891/semantic-ui-sidebar-pusher-causing-react-router-to-rerender-its-component