Javascript 如何防止React卸载/重新安装组件？

我正在使用

react路由器

和

react-redux

。我有两条这样的路线：

<Route path='/edit'     component={ EditNew } />
<Route path='/edit/:id' component={ EditDraft } />

及

const EditDraft=connect（state=>（{drafts:state.drafts}））（React.createClass({
render（）{
const{params，drafts}=this.props；
const draft=findDraft（参数id，草稿）；
返回；
}
}));

现在，

Editor

的装配方式是，当您开始在空白的

Editor

中键入时，它会触发一个

history.replaceState（）

从

/edit

到

/edit/：id

，并生成一个巨大的id。发生这种情况时，我会得到以下事件序列：

• EditorNew

  卸载

• 编辑器

  卸载

• EditorDraft

  渲染和装载

• 编辑器

  渲染和装载

当我对这两个容器进行编码时，我认为这两个容器中包含的

编辑器

组件可以在不卸载和重新装载的情况下进行协调。这对我来说是有问题的，除了额外的不必要的工作之外，主要原因是编辑器在卸载和重新装载后失去了焦点和适当的光标范围

我尝试为

编辑器
组件指定
键
，以提示对账系统它是同一个组件，但无效，我尝试了
shouldComponentUpdate
，但没有调用该键，考虑到React正在做什么，这是有意义的

除了使用更复杂的
render（）
逻辑将两个容器组合成一个容器外，我还可以做些什么来防止
编辑器
组件在历史转换期间卸载/重新安装？
如果路由从
/edit
更改为
/edit/：id
（从连接到组件的状态获取路由器信息时，您可以对此进行检查）返回false，因此它不会刷新组件。
很可能这在
react路由器中是不可能的
表示，如果元素具有不同的类型（在这种情况下，
EditNew
和
EditDraft
），则react将“拆掉老树，从头开始建造新树。”

为了防止这种情况发生，您需要对两个路由使用相同的组件。
听起来它的工作方式与预期的一样；您正在更改顶级组件，其中
编辑器
是一个子组件，因此它应该完全销毁并在新的父级下重新创建。所以我应该合并容器，嗯？我正在查看，但我没有考虑到我想尽快将其迁移到中继，我想向该项目添加更多内容。是的，我建议使用单个容器，特别是因为您正在讨论同一事物的不同状态，而不是以完全不同的容量使用
编辑器。谢谢，我会这样做。
const EditNew = connect(state => ({}))(React.createClass({
    render() {
        return <Editor />;
    }
}));

const EditDraft = connect(state => ({ drafts: state.drafts }))(React.createClass({
    render() {
        const { params, drafts } = this.props;
        const draft = findDraft(params.id, drafts);
        return <Editor draft={ draft } />;
    }
}));