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

IT技术 reactjs react-router
2021-05-26 07:22:44

我仍在掌握 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 这样的东西来解决这个问题。

1个回答

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

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

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

它将作为App组件的props提供：

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

有关react-router/injected-props 中的路由参数的更多信息

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

class App extends React.Component {
  shouldComponentUpdate (nextProps) {
    nextProps.params.screen
    return false
  }
}
其它你可能感兴趣的问题
上一篇Ender 3 奇怪的床位下降 下一篇Cura中的灯丝厚度设置在哪里？