当 next/router 改变状态时更新 react-router答案

【问题标题】：Update react-router when next/router changes state当 next/router 改变状态时更新 react-router
【发布时间】：2020-03-30 22:59:44
【问题描述】：

我有一个 Next.js 应用程序，其中包含多个页面，在 Next 应用程序中，它们有自己的 BrowserRouter 和 react-router-dom。（This is the reason 。）

使用react-router-dom 中的Link 可以正常工作，更改仅在BrowserRouter 内的整个组件中传播，这适用于我们的案例。（当链接到另一个 BrowserRouter 的页面时，我们使用 next/link，它也可以正常工作。）

但是，我们现在正在使用不同的BrowserRouters 创建要在页面之间共享的组件，因此我在该共享组件中使用了next/link。

问题在于 Next 路由器的更改状态不会传播到 BrowserRouter。

这里问题的最小再现：https://codesandbox.io/s/next-js-react-router-not-updating-uy8bj
BrowserRouter 位于components/App.js。

【问题讨论】：

标签： react-router next.js

【解决方案1】：

您也可以在BrowserRouter 中访问next/router 状态。侵入性最小的修复方法是在 BrowserRouter 与 next/router 不同步时推送它的历史记录。您可以在这样的组件中执行此操作：

import { useEffect } from "react";
import { useRouter as useNextRouter } from "next/router";

function RouteIfStaleUrl(props) {
  const nextRouter = useNextRouter();

  useEffect(() => {
    if (props.match.url !== nextRouter.asPath) {
      props.history.push(nextRouter.asPath);
    }
  });

  return false;
}

然后将该组件添加到BrowserRouter 内的Route。如果该路由应该在所有路由上运行，则该路由具有path="*" 很重要。

<BrowserRouter>
  <Route path="*" component={RouteIfStaleUrl} />
  // other stuff ...
</BrowserRouter>

带有修复的分叉 Codesandbox：https://codesandbox.io/s/next-js-react-router-fix-updates-sug4s

【讨论】：