Почему React router не обновляет ссылку при клике, но все работает при прямом запросе?

Question

[k3499]

Изучаю Реакт роутер и не понимаю что не так. При прямом запросе все на странице обновляется, а при клике на NavLink - нет.
Вот шапка с ссылками

import React from 'react';
import './Header.css';
import { NavLink } from 'react-router-dom'; 

function Header() {
  return (
    <div className="header">
      <NavLink exact to="/">Главная</NavLink>
      <NavLink to="/adress">Адреса</NavLink> 
    </div>
  );
}

export default Header;

Вот app с роутами

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Header from '../Header/Header';
import News from '../News/News';
import Adress from '../Adress/Adress';

function App() {
  return (
    <div className="App">
      <Header />
      <Switch>
        <Route exact path="/">
          <News />
        </Route>
        <Route path="/adress">
          <Adress />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

А это index с BrowserRouter

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './components/App/App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter> 
      <App />
    </BrowserRouter> 
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Comments

[k3499]

Сейчас попробовал стандартный пример с документации реакт роутер и тоже не работает

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        {/* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */}
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

В чем может быть проблема. Куда смотреть?

[Alexandroppolus]

Какая версия роутера у тебя на проекте? Должна быть 6. А код выглядит как для 5