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={}。修复一切。它也在文档中。

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

1 个答案: