How to reload the page using React-Router's NavLink?

You can set forceRefresh property of BrowserRouter to true:

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

export default function BasicExample() {
  return (
    <Router forceRefresh>
      <div>
        <Link to="/">Home</Link>
      </div>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  )
}

It will reload the whole page when you click on a link made with <Link> or <NavLink> for the whole application. But if you want to reload just for a single <Link>, I think you will have to do it in some other way like window.location.reload().

Here is CodeSandbox.

In addition to Ajeet's answer, here's another way to do it if you need just the links in question to refresh the whole page, but want to work like a single page application otherwise:

This is essentially just making a quick version of the NavLink that uses normal a tags instead of using react-router to change routes. This definitely doesn't include all of the functionality that the NavLink supports, but that could be added in as needed.

import React from "react";
import { useRouteMatch } from "react-router-dom";

export const FakeNavLink = ({
  children,
  to,
  className = "",
  style = {},
  activeClassName = "active",
  basename = "",
  activeStyle = {},
  exact,
  strict
}) => {
  const active = useRouteMatch({ path: to, exact, strict });
  let styleObj = style;
  if (active) {
    styleObj = { ...styleObj, ...activeStyle };
  }
  return (
    <a
      href={basename + to}
      className={className + (active ? ` ${activeClassName}` : "")}
      style={styleObj}
    >
      {children}
    </a>
  );
};

CodeSandbox