React Router 中的队列页面转换

Question

我有一个基于 React 的 Web 项目，我在其中使用 React Router 4 来处理我的路由。我一直在使用 React Router 和“react-transition-group”做一些小步骤，添加基于 CSSTransition 组件的类的淡入淡出转换，即淡入淡出、淡入淡出-主动等...

无论如何 - 这一切都很好，但如果我快速来回单击浏览器按钮以更改路线，那么转换会被中断，并且会更多地跳入“新的转换状态”。

有没有办法对更改的路线进行排队，以便如果用户在转换已经进行时更改为不同的路线，则等待第一个转换完成，然后处理“新路线”。我不希望位置/网址停止或任何只是过渡工作更顺利..？

谢谢

Answer 1

我做了一个库来解决这个问题。

npm：react-queue-router
文档：https://tokky0425.github.io/react-queue-router/

这可能就是你想要的。
（如果有问题，请在github上发布问题。）

基本上，这里的问题是当用户来回单击浏览器按钮时，您无法取消或停止（如 e.preventDecault）location.pathname 的更改。
一种解决方案是不基于 location.pathname 而是基于您手动存储在某处的其他值来实现路由。

在我上面提到的库的情况下，location.pathname的历史会在一个数组中排队，组件的mount会根据数组的值依次执行
这使得等待过渡动画结束成为可能。
（因为location.pathname的变化只是意味着路径名将在数组中排队。）

React Router 似乎很难完成这项工作，只要它的路由是基于 location.pathname 实现的。