CODEWITHSUNDEEP
reactjsreact-routerreact-bootstrap
clarkf
clarkf

Reputation: 711

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

Its an straightforward question how to reload the page when selecting the <NavLink> items on reactrouter 6? Because reactrouter 5 has <BrowserRouter forceRefresh={true} /> to reload the page.

Below is my code and also here is the complete sandbox code 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>
  );
}

any workaround or possible solutions will help.

Upvotes: 3

Views: 4615

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196177

You can add a reloadDocument property to the Link or NavLink that you want to cause a reload.

Link documentation

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>).

Updated sandbox: https://codesandbox.io/s/react-router-bootstrap-offcanvas-menu-forked-0i4wl

Upvotes: 6

Related Questions