Почему react router меняет url, но не меняет страницу?

Question

[Wetter]

App.js
import AppHeader from "../appHeader/AppHeader";
import {BrowserRouter as Router, Link, Route, Switch} from "react-router-dom";
import {MainPage, ComicsPage} from '../pages'

const App =()=> {
  return (
  <Router  basename="/marvel-information-portal">
    <div className="app">
      <AppHeader/>
      <main>
      <Switch>
        <Route path="/" exact>
          <MainPage/>
        </Route>
        <Route path="/comics" exact>
          <ComicsPage/>
        </Route>
      </Switch>
      </main>
    </div>
  </Router>
  )
}

export default App;

AppHeader.js

import {Link, NavLink} from 'react-router-dom'
import './appHeader.scss';

const AppHeader = () => {
    return (
        <header className="app__header">
            <h1 className="app__title">
                <Link to="/">
                    <span>Marvel</span> information portal
                </Link>
            </h1>
            <nav className="app__menu">
                <ul>
                    <li><NavLink activeStyle={{color:'#9f0013'}} exact to="/">Characters</NavLink></li>
                    /
                    <li><NavLink activeStyle={{color:'#9f0013'}} exact to="/comics">Comics</NavLink></li>
                </ul>
            </nav>
        </header>
    )
}

export default AppHeader;

package.json

{
  "name": "ulbi-react-course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "react-transition-group": "^4.4.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Github

Answer 1

[Shurik]

Что у вас за компонент Switch?
Route должные быть обернуты Routes, а в index.js App - BrowserRouter
Попробуйте сделать по примеру из документации https://reactrouter.com/en/v6.3.0/getting-started/... и все должно заработать

Comments

[Wetter]

В 5ой версии react-router судя по документации Switch, а не Routes(в данном проекте используется версия 5.3.0)
https://v5.reactrouter.com/web/guides/quick-start
Сделал, как Вы и посоветовали(перешел на более новую версию роутера и все заработало). Однако все же не понятно в чем была проблема, новый React(18+) не работает со старым React Router'ом(v5)

[Shurik]

Wetter, хорошо, что заработало :) С 5м Роутером не подскажу к сожалению - не работал с ним.