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

Question

我有一个应用程序组件，它使用react-router在两个路由中保存一些组件。我还有一个 Firebase 数据存储，我想将其绑定(bind)到 App 的状态(使用 rebase)，这样我就可以将它作为 prop 传递给我希望的任何组件。这是我的应用程序类:

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 有几个 Action 使用 rebase 修改/读取 Firebase 的组件。作为这些操作的回调，它们还会更改 Home组件的状态。问题是，每当我进行 Firebase 调用时，它都会重新安装 Home组件和我拥有的任何状态都会丢失。

如果我删除 Router包装来自Home组件，并将其纯粹渲染为 render( <Home items={this.state.items} rebase={rebase} /> ) ，我的应用程序按预期完美运行。我不知道为什么要把它包裹在 Router 中东西让它不起作用。我认为这是因为我有额外的 URL 参数，当我调用 firebase 更新时这些参数也发生了变化(例如 /?p=sgergwc4 )，但我有一个按钮可以在没有 firebase 更新的情况下更改该参数，但它不会导致任何问题(即不会导致重新安装)。那么路由器怎么了？

Answer 1

事实证明答案很简单；我应该使用 render={}，而不是 component={}。修复一切。它也在文档中。