如何使用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,浏览器可以预渲染屏幕外层).

我已经尝试了六种方法来实现这一点,但它们都非常hacky或涉及重复匹配代码.我究竟做错了什么？

此外,我想避免添加像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/inject-props的路由参数

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

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