Как убрать обновление всей страницы при клике на Navbar?

Question

[brsubota]

Имеется следующая структура:
index.js
custom-component/
-- List.js
-- Random.js
ui/
--navbar.js

List.js выводит список, который генерируется в зависимости от текущей страницы
Random.js генерирует случайную страницу и вызывает List.js с параметром этой страницы

В navbar.js у меня обычное меню бутстрапа, где есть ссылка
<NavLink href="/random"...

При переходе по этой ссылке у меня полностью обновляется DOM и происходит запрос страницы Random.js
При этом пропадает и верхнее меню и все остальные элементы. Буквально на пару секунд вся страница просто белая. Как мне избежать этого? Как верно построить структуру так, что бы при клике на ссылку random у меня происходило изменение только контентной части, в которой уже реализован Loader.
Лоадер кстати срабатывает на секунду во время ajax запроса на странице List.js

В идеале вижу такую картину:
Находимся например на главной странице. При клике на Random, происходит появление Loader'a, и потом отображаются нужные данные. Я только учусь на React, поэтому прошу совета опытных.

Если я правильно понимаю, то по клику на ссылку переход на страницу не нужен. Нужно изменение состояния компонента, и передачи этого состояния. Только в голове не укладывается как это должно выглядить.
Спасибо.

Answer 1

[Vladimir]

Без кода сказать сложно, что у Вас происходит

Answer 2

[Qwasaew]

Судя по всему, вам надо при клике в меню отменить его дефолтное поведение

<NavLink href="/random"  onClick={event => this.clickHandler(event)}>

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

Answer 3

[real2210]

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