Refresh content after clicking navlink reactJs

Harrison Martes 0
Viewed 15

I would like, when clicking on a NavLink, to update the router page instead of just changing it, my pages contain external JS plugins that are not loaded just by changing the page, it is necessary to reload. My code:

import React from "react";
import Home from './components/pages/Home';
import Header from './components/Header';
import Sidebar from './components/Sidebar';
import Teste from './components/pages/Teste';
import Footer from './components/Footer';
import { Fragment } from "react";
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";

export default function App() {
  return (
    <div>
      <Fragment>
        <div className="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">
          <Header />
          <div className="app-main">
            <Router>
              <Sidebar />
              <div className="app-main__outer">
                <Switch>
                  <Route path="/home">
                    <Home />
                  </Route>
                  <Route path="/page/teste">
                    <Teste />
                  </Route>
                </Switch>
                <Footer />
              </div>
            </Router>
          </div>
        </div>
      </Fragment>
    </div>
  );
}

The NavLinks is in the SideBar component, so it is not seen there, my "Home" page contains a JS plugin that when coming from the "Test" page, it is not loaded, only when I refresh the entire page. Thanks.

react-router-dom react-router reactjs node.js javascript
2 Answers

You can refresh the BrowserRouter by using forceRefresh property of BrowserRouter:

          <Router forceRefresh>
              <Sidebar />
              <div className="app-main__outer">
                <Switch>
                  <Route path="/home">
                    <Home />
                  </Route>
                  <Route path="/page/teste">
                    <Teste />
                  </Route>
                </Switch>
                <Footer />
              </div>
            </Router>
debugger0

You can force page reloads with the forceRefresh prop on the BrowserRouter.

forceRefresh

If true the router will use full page refreshes on page navigation. You may want to use this to imitate the way a traditional server-rendered app would work with full page refreshes between page navigation.

<Router forceRefresh>
  <Sidebar />
  <div className="app-main__outer">
    <Switch>
      <Route path="/home">
        <Home />
      </Route>
      <Route path="/page/teste">
        <Teste />
      </Route>
    </Switch>
    <Footer />
  </div>
</Router>

If/when you ever upgrade to react-router-dom@6 this is accomplished similarly via the Link|NavLink component's reloadDocument prop.

RRDv6 Link

interface LinkProps
  extends Omit<
    React.AnchorHTMLAttributes<HTMLAnchorElement>,
    "href"
  > {
  replace?: boolean;
  state?: any;
  to: To;
  reloadDocument?: boolean; // <--
}
Drew Reese0
Related