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

Question

我有一个Next.js应用程序，其中有多个页面，而在Next应用程序中，这些页面具有来自Page.get_parent的{​​{1}}单独的页面。 （{This is the reason。）

使用BrowserRouter中的react-router-dom很好，更改仅传播到Link中的所有组件，这适用于我们的情况。 （当链接到另一个react-router-dom的页面时，我们使用BrowserRouter，它也可以正常工作。）

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

问题是因为下一个路由器的更改状态不会传播到BrowserRouter中。

此处的问题最少复制：https://codesandbox.io/s/next-js-react-router-not-updating-uy8bj
next/link在BrowserRouter中。

Answer 1

您也可以在BrowserRouter中访问components/App.js状态。侵入性最小的修复方法是在next/router与BrowserRouter不同步时推送到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; } 内的Route中。如果应该在所有路由上运行，则路由必须具有BrowserRouter。

path="*"

具有以下修补程序的分叉代码沙箱：https://codesandbox.io/s/next-js-react-router-fix-updates-sug4s