Javascript 如何在路由更改时卸载组件

我在给定路线上有一个组件，比如

app.com/cars/1

我有一个侧边栏，上面有指向不同汽车的链接，例如

/cars/2

，

/cars/3

等

我遇到的问题是，当您更改链接时，比如从

cars/1

转到

cars/2

，组件不会卸载，并且我会触发

componentWillReceiveProps

。如果我转到另一个包含不同组件的页面，例如

/trucks

，则该组件已卸载，并且一切正常

当路由更改时，如何卸载组件？我有各种状态和流量的东西，我想为下一辆车放行。或者，如果不卸载，人们处理此类问题的典型方式是什么？我无法想象这不是很普遍

---

（注意我使用的是react路由器）

我认为处理这个问题的正常方法就是在

组件WillReceiveProps中注销并重新注册侦听器，重置状态，等等。围绕此行为创建抽象是正常的：

componentWillMount: function() {
  this.setupStuff(this.props);
}

componentWillUnmount: function() {
  this.tearDownStuff();
}

componentWillReceiveProps: function(nextProps) {
  this.tearDownStuff();
  this.setupStuff(nextProps);
}

setupStuff: function(props) {
  this.setState(this.getDataFromStore(props.store));
  props.store.listen(this.handler); // or whatever
}

tearDownStuff: function(props) {
  props.store.unlisten(this.handler); // or whatever
}

但是，如果您真的想重新安装组件，有几个选项可以使用

如果您不希望任何组件在路由更改期间保持挂载状态，您可以利用路由器的功能为组件添加唯一密钥：

function createElement(Component, props) {
  var key = ...; // some key that changes across route changes
  return <Component key={key} {...props} />;
}

// ...

<Router createElement={createElement}>
  ...

我最后只是做了：

const createElement = (Component, props) =>
  <Component key={props.params.id} {...props}/>;

ReactDOM.render(
  <Router history={browserHistory} createElement={createElement}>
    <Route path="courses/:id" component={Page_courses_id}/>
  </Router>
);

constcreateelement=（组件、道具）=>
;
ReactDOM.render(
);

忽略潜在的性能问题（如果发生），在我看来，维护成本（在：dynamic segment下重置所有组件的状态，在componentWillReceiveProps中重新蚀刻数据等）是不值得的。
我选择了带有更改键的Michelle Tilley选项，但是我没有为路由器中的整个组件设置密钥，而是只为需要重新启动挂钩进行更新的组件设置密钥

这很有效


const UniqComponent=（）=>{
const uniqId=123；//可能是carId
返回
}
ReactDOM.render(
);现在仍然相关，但是，如果您的状态来自您无法控制的钩子，则重置状态并不容易。@cdosborn是的。我想我可能会将钩子用法包装到子组件中，并根据包装组件中的一些其他数据，根据需要使用更改的
键
属性来呈现钩子用法，以启用强制重新装载。看，我有一些类似的情况…一个可以在左侧和右侧打开和关闭的侧栏，我有dhtmlx调度程序组件。在页面上重新加载一切正常，但当我转到Route3并返回Route2时，侧栏和dhtmlx调度程序都存在，然后打开侧栏，调度程序组件应根据侧栏展开时留下的宽度调整其宽度，但调度程序的某些部分被切断。在页面上硬刷新，虽然工作正常，但在侧边栏展开时可以完美地调整其宽度。我是否应该在每次路由更改时卸载调度程序组件。请查找附加的github链接。任何指针都将被删除elpful@sk215，我相信你将有更多的运气将此作为一个问题提交。我提出了一个新问题，谢谢你的建议lakesare问题链接
const createElement = (Component, props) =>
  <Component key={props.params.id} {...props}/>;

ReactDOM.render(
  <Router history={browserHistory} createElement={createElement}>
    <Route path="courses/:id" component={Page_courses_id}/>
  </Router>
);