Визуализировать функцию вызова метода несколько раз при переключении компонента с помощью маршрутизатора

Question

В процессе разработки моего первого приложения ReactJS я заметил, что в некоторых случаях методы рендеринга вызывают функцию несколько раз, когда я переключаюсь на другие компоненты со ссылками на маршрутизатор.Я не уверен, что это нормально или это что-то не так в отношении стандарта кодирования.

Пример, приведенный ниже:

Компонент 1 - домашняя страница Компонент 2 - ТВ

Step1 : приложение загружает домашнюю страницу, и я перемещаюськ компоненту ТВ, на этот раз консоль будет регистрировать данные только один раз.

Step2 : После загрузки компонента ТВ я снова перейду на домашнюю страницу по ссылке в моем логотипе в заголовке.

Шаг 3 : И снова, если я перейду на страницу ТВ по ссылке, на этот раз консоль будет регистрировать данные 4 раза.

Route.js

const Routes = () => (
<BrowserRouter>
<Route exact path='/' component={HomePage} />
<Route path='/tv' component={TV} />
</BrowserRouter>
);
export default Routes;

Телевизионный компонент

class Tv extends Component {
componentDidMount() {
   this.props.tvFetchData();
}
createTvList = () => {
   let sub_videos = this.props.tv.sub_videos
     if (sub_videos) {
       console.log(sub_videos);
     } else {
       return 'loading...'
     }
}
render() {
   return (
      <div className="tv-wrapper">
         {this.createTvList()}
      </div>
     );
   }
}

Ссылка в меню. Js

<Link to={menu.link} className="nav-link">{menu.name}</Link>

Пожалуйста, сообщитея знаю, если что-то не так с этим подходом?