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

小编典典

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

阅读 252

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