How to stop refreshing the entire page when clicking on the Navbar?

Question

JavaScript

There is the following structure:
index.js
custom-component/
-- List.js
-- Random.js
ui/
--navbar.js
List.js outputs a list that is generated depending on the current page
Random.js generates a random page and calls List .js with this page parameter
In navbar.js I have a regular bootstrap menu with a link.
<NavLink href="/random"...
When I click on this link, the DOM is completely updated and the Random.js page is requested
At the same time, the top menu and all other elements disappear. Literally for a couple of seconds the entire page is just white. How can I avoid this? How to correctly build a structure so that when I click on the random link, I only change the content part, in which Loader is already implemented.
By the way, the loader works for a second during the ajax request on the List.js page.
Ideally, I see the following picture:
For example, we are on the main page. When you click on Random, the Loader appears, and then the desired data is displayed. I'm just learning React, so I'm asking for experienced advice.
If I understand correctly, then by clicking on the link, the transition to the page is not needed. You need to change the state of the component, and transfer this state. It just doesn't fit in my head how it should look.
Thank you.

Answer 1

It's hard to tell what's going on without the code.

Answer 2

Apparently, you need to cancel its default behavior when clicking on the menu

clickHandler = (event) => {
    event.preventDefault()
    this.showLoader()
    // ... etc
  }

Answer 3

<NavLink to="/random">Random</NavLink>