如何使用 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
  }
}

如何使用 react-router 触发状态变化？

How can I use react-router to trigger state changes?

reactjs

react-router