如何使用 react-router 触发状态更改？

Question

我仍在学习 React 和 react-router，但我想知道如何使用 react-router 来简单地更新应用程序状态，而无需重新渲染 DOM 节点。

例如，假设我有：

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

我想重用 react-router 的匹配，但只是更新 App 组件的当前屏幕。

原因是假设在上面的例子中我有三个水平排列的屏幕，一次只有一个可见。当路线发生变化时，我想在适当的屏幕上制作动画。如果我通过为每个路由分配一个组件来做到这一点，react-router 在路由匹配之前不会渲染其他屏幕，并且屏幕滑入会有明显的延迟。

但是，如果我将所有三个屏幕都保留在 DOM 中并简单地切换状态以触发 CSS 转换，则不会出现延迟（因为适当使用 will-change，浏览器可以预渲染屏幕外层）。

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

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

Answer 1

所以你想要类似于Spectacle 的东西？

在你的情况下，我会将所有屏幕作为 App 组件的子级，并使用 react-router 的参数来知道你在哪个屏幕上。

<Route path="/(:screen)" component={App}>

它将作为 App 组件的道具提供：

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

在react-router/injected-props了解更多关于路由参数的信息

如果您在重新渲染时遇到问题，可以使用组件生命周期方法shouldComponentUpdate。在此方法中返回 false 将阻止组件重新渲染，并且您将拥有新的道具（其中还包括路由参数）。

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