React router - <Route /> не отображает, если <Link> не находится в том же компоненте

Многократное использование ReactDOM.render создаст отдельные экземпляры, не знающие друг друга источник.

Давайте перейдем к реструктуризации, чтобы ваше приложение стало лучше:

App.js

import React from 'react';
import { Main } from './components';
const App = () => (
    <Main />
)

ReactDOM.render(<App />, document.getElementById("app"));

Main.js

import React from 'react';
import { Router, Route } from 'react-router-dom';
import { Header, Login, Register, Home } from './components'

const Main = () => (
 <Router>
    <React.Fragment>
      <Header />

      <Route exact path = "/" component = {Home} />
      <Route path = "/login" component = {Login} />
      <Route path = "/register" component = {Register} />

      <Footer />
    </React.Fragment>
  </Router>
)

export { Main };

Таким образом, на самом деле мы всегда визуализируем только один экземпляр. Ваш верхний / нижний колонтитулы будут размещены за пределами маршрутизатора, поэтому при изменении маршрута они останутся неизменными. Имейте в виду, что это вызовет затруднения, например, если вы хотите, чтобы ваш заголовок выделял активный маршрут, самый простой способ, поскольку он находится за пределами маршрутизатора и не получает от него реквизиты, - это проверить URL-адрес. Также обратите внимание, что здесь мы используем <React.Fragment>, но вы можете использовать <div> или что-нибудь еще, что вам нравится. Маршрутизатор ожидает только одного дочернего элемента, поэтому, если вам не нужны дополнительные элементы html, вы можете использовать фрагмент!