我有一个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 组件，并且我所拥有的任何状态都会丢失 .
如果我从 Home 组件中删除 Router 包装器，并将其纯粹渲染为 render( <Home items={this.state.items} rebase={rebase} /> ) ，我的应用程序将按预期完美运行 . 我不知道为什么把它包装在 Router 中会让它无法正常工作 . 我认为这是因为我在调用firebase更新时（例如 /?p=sgergwc4 ）还有其他URL参数也发生了变化，但是我有一个按钮，在没有firebase更新的情况下更改了该参数，并且它没有导致重新安装） . 那么路由器怎么了？
1 回答
事实证明答案很简单;而不是
component={}，我应该使用render={}. 修复一切 . 它也在文档中 .