React Router导致Firebase更新时重新安装组件

Question

我有一个App组件，它使用react-router在两条路由中包含一些组件。我也有一个Firebase数据存储区，我想绑定到App的状态（使用rebase），以便可以将其传递给我希望作为道具的任何组件。这是我的App类：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {}
    };
  }

  componentDidMount () {
    rebase.bindToState('items', {
      context: this,
      state: 'items'
    })
  }

  render() {
    return (
      <Router>
        <div className='container'>
          <div className="header">
            <h3>Header</h3>
            <Nav/>
          </div>
          <Switch>
            <Route exact path='/' component={() => <Home items={this.state.items} rebase={rebase} />} />
            <Route render={function () {
              return <p>Not Found</p>
            }} />
          </Switch>
        </div>
      </Router>
    )
  }
}

现在，当我加载页面时，我得到了两个安装Home组件。这本身并不好。但是，我在Home组件中有几个操作，这些操作使用rebase修改/读取Firebase。作为这些操作的回调，它们还更改了Home组件的状态。问题是，每当我执行Firebase调用时，它都会重新安装该Home组件，而我拥有的任何状态都会丢失。

如果我Router从Home组件中移除包装器，并且仅将其渲染为render( <Home items={this.state.items} rebase={rebase} /> )，则我的应用程序将按预期完美运行。我不知道为什么将其包装在Router东西中使其无法工作。我以为是因为我调用Firebase更新时（例如/?p=sgergwc4）也更改了其他URL参数，但是我有一个按钮可以在不更新Firebase更新的情况下更改该参数，并且不会引起任何问题（即不会导致重新安装）。那么路由器发生了什么？

Answer 1

事实证明答案很简单；相反component={}，我应该使用render={}。修复所有问题。它也在文档中。