Reactjs 如何使用react路由器触发状态更改？

我仍然在学习React和React路由器，但我想知道如何使用React路由器在不重新渲染DOM节点的情况下简单地更新应用程序状态

例如，假设我有：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute screen="main" />
    <Route path="settings" screen="sync" />
    <Route path="overview" screen="overview" />
  </Route>
</Router>

我想重复使用react路由器的匹配，但只需更新应用程序组件的当前屏幕

原因是，假设在上面的示例中，我有三个水平排列的屏幕，一次只能看到一个。当路线改变时，我想在适当的屏幕上设置动画。如果我通过为每个路由分配一个组件来实现这一点，react router在路由匹配之前不会呈现其他屏幕，并且屏幕滑入时会有明显的延迟

但是，如果我将所有三个屏幕都保留在DOM中，并简单地切换状态以触发CSS转换，则不会出现延迟（因为，适当使用

将改变

，浏览器可以预渲染屏幕外的层）

我已经尝试了半打实现这一点的方法，但它们都非常粗糙，或者涉及到在某种程度上复制匹配的代码。我做错了什么

---

另外，如果可能的话，我希望避免添加Redux之类的东西来解决这个问题。

那么您想要类似的东西吗

在您的情况下，我会将所有屏幕作为

App

组件的子屏幕，并使用react router的参数来知道您在哪个屏幕上

它将作为

App

组件的道具提供：

class App extends React.Component {
  componentWillMount () {
    this.props.params.screen
  }
}

有关路由参数的详细信息，请访问

如果在重新渲染时遇到问题，可以使用组件生命周期方法。在此方法中返回

false

将阻止组件重新渲染，并且您将拥有新的道具（其中还包括路由参数）

---

非常感谢。我从未想过在顶层参数化屏幕。我也会调查shouldComponentUpdate。非常感谢你！我也非常感谢：）。。。与此不同的是，我正在使用“componentDidUpdate”。。。但多亏了你，目标才得以实现；）

class App extends React.Component {
  shouldComponentUpdate (nextProps) {
    nextProps.params.screen
    return false
  }
}