React-router-dom не отображает компоненты при изменении маршрута

Вам нужно обернуть компонент наивысшего порядка, чтобы он работал должным образом. Если ваше приложение простое, оберните его в метод ReactDOM.render. Вот так

ReactDOM.render((
<BrowserRouter>
  <App/>
</BrowserRouter>),
document.getElementById('root'))

У меня такая же проблема. Удалите файл from header.jsx и поместите его в свой index.js следующим образом:

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
, document.getElementById('root'));

Будьте внимательны с порядком из Маршрут, Выключатель и Маршрутизатор. Я следую этому порядку, и он у меня работает. Примечание: Попробуйте использовать функцию стрелки

import React from "react";
import { Switch, Route, Router } from "react-router-dom";
// Containers
import { Dashboard, CardPayment } from "../Containers";

const history = createBrowserHistory();

const ReactRouter = () => {
  return (
    <Router history = {history}>
      <Switch>
        <Route path = "/dashboard" component = {Dashboard} exact = {true} />
        <Route path = "/card-payment" component = {CardPayment} exact = {true} />
        <Route path = "/" component = {Dashboard} exact = {true} />
      </Switch>
    </Router>
  );
};

export default ReactRouter;

В моем случае использовался маршрутизатор, и переход на более раннюю версию библиотеки "истории" устранил проблему.

app.tsx

<Router history = {history}>
  <Switch>
    <Route exact path = {`${AppRoute.ALBUMS}/:author/:album`} component = {PhotosPage}/>
    <Route exact path = {`${AppRoute.ALBUMS}/:id`} component = {AlbumsPage}/>
    <Route path = {AppRoute.ERROR} component = {ErrorPage}/>
    <Route path = {AppRoute.ROOT} component = {AuthorsPage}/>
  </Switch>
</Router>

Версии в моем проекте:

package.json:

...
"history": "4.10.1",
"react-router-dom": "5.2.0",
...

Библиотека "история" изначально имела версию "5.0.0".

<Link to  = {"/home"}>Home</Link>

В моем случае Я забыл добавить скобки к параметру "Кому", значит, это рендеринг компонентов.

Для тех, кто не смог исправить эту ошибку

Шаг 1. Убедитесь, что компонент более высокого порядка обернут маршрутизатором. В вопросе выше это уже сделано.

class App extends Component {
  render() {
    return (
      <div className = "container">
        <BrowserRouter>
          <Switch>
            <Route exact path = "/" component = {Me} />
            <Route path = "/contrib" component = {Contrib} />
            <Route path = "/projects" component = {Projects} />
            <Route path = "/contact" component = {Contact} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

Давайте рассмотрим, что <Header/> находится внутри любого из компонентов <Route/>.

Шаг 2: Если компонент более высокого порядка уже упакован в Router, не упаковывайте также и <Header/>, если вам не нужна отдельная маршрутизация внутри <Header/>.

import { NavLink} from 'react-router-dom';

const Header = () => {
    return (
        <div className = "container">
            <div id = "logo">
                <img src = {Earth} alt = "placeholdit" className = "rounded" />
            </div>
            <nav>
                <ul>
                        <li><NavLink to = "/">Home</NavLink></li>
                        <li><NavLink to = "/contrib">Contributions</NavLink></li>
                        <li><NavLink to = "/projects">Projects</NavLink></li>
                        <li><NavLink to = "/contact">Contact</NavLink></li>
                        <li></li>
                    </ul>
            </nav>
        </div>
    )
}