小编典典

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

reactjs

我仍在使用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之类的东西,只是为了尽可能地解决此问题。


阅读 250

收藏
2020-07-22

共1个答案

小编典典

所以您想要类似眼镜的东西吗?

在您的情况下,我会将所有屏幕都放置为该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
  }
}
2020-07-22