如何在reactrouter 6上选择NavLink项目时重新加载页面？

Question

这是一个简单的问题，如何在reactrouter 6上选择项目时重新加载页面<NavLink>？因为reactrouter 5要<BrowserRouter forceRefresh={true} />重新加载页面。

下面是我的代码，也是完整的沙箱代码https://codesandbox.io/。

export default function App() {
  return (
    <BrowserRouter>
      <header>
        <Navbar />
      </header>

      <main className="flex-shrink-0">
        <React.Suspense fallback={<h6>Loading...</h6>}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
          </Routes>
        </React.Suspense>
      </main>
    </BrowserRouter>
  );
}

任何解决方法或可能的解决方案都会有所帮助。

Answer 1

您可以添加一个reloadDocument属性添加到Link或NavLink想要导致重新加载的属性。

链接文档

您可以使用<Link reloadDocument>跳过客户端路由并让浏览器正常处理转换（就好像它是一个<a href>）。

更新的沙箱：https://codesandbox.io/s/react-router-bootstrap-offcanvas-menu-forked-0i4wl