在 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 文档

You can use <Link reloadDocument> to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).

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

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

How to reload the page when selecting the NavLink items on reactrouter 6?

reactjs

react-bootstrap

react-router

Link 文档