Активный стиль NavLink не работает | React Router

Question

Я применил activeClassName к <NavLink>, но он не стилизовал бы его, когда он находится на странице. Вместо этого, если щелкнуть ссылку, она стилизует ее, но при отпускании она возвращается. Вот скриншот . Я тоже попробовал activeStyle но тоже самое. Вот мой код.

index. js

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Route,
    NavLink,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom';

import './index.css';
import App from './App';
import Users from './Users';
import Contact from './Contact';
import Notfound from './Notfound';
import * as serviceWorker from './serviceWorker';

const routing = (
    <Router>
        <div>
            <ul>
                <li>
                    <NavLink exact activeClassName="active" to="/">Home</NavLink>
                </li>
                <li>
                    <NavLink activeClassName="active" to="/users">Users</NavLink>
                </li>
                <li>
                    <NavLink activeClassName="active" to="/contact">Contact</NavLink>
                </li>
            </ul>
            <Switch>
                <Route exact path="/" component={App} />
                <Route path="/users" component={Users} />
                <Route path="/contact" component={Contact} />
                <Route component={Notfound} />
            </Switch>
        </div>
    </Router>
)

ReactDOM.render(routing, document.getElementById('root'));
serviceWorker.unregister();

index. css

body {
  margin: 0;
  padding: 2rem;
  font-family: sans-serif;
}


/* a, a:hover {
  color: black;
} */

a.active {
  color: red;
}

package. json

{
  "name": "routing",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Это учебник , которому я следовал. Я знаю, что это дублирующий вопрос, но ни один из ответов не смог помочь.

Браузеры, протестированные на:

• Firefox Developer Edition 73.0b12 (64-разрядная версия)
• Google Chrome 79.0.3945.130 (Официальная сборка) (64-разрядная версия)

Версия React: ^ 16.12.0

Версия маршрутизатора React: ^ 5.1.2

Снимок экрана компонента DevTools для активного NavLink

Снимок экрана компонента DevTools для дочернего элемента

Последнее редактирование: Хорошо, ребята, спасибо для ответов. Ни один из них не помог, поэтому я собираюсь оставить эту функцию и обойти ее.

Answer 1

Я решил эту проблему, когда я удалил пакет gh-pages и переустановил

Answer 2

У меня работает следующий код:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Route,
  NavLink,
  BrowserRouter as Router,
  Switch
} from 'react-router-dom';

import './index.css';
import * as serviceWorker from './serviceWorker';


class App extends React.Component {
render() { 
    return (        
<Router>
    <div>
        <ul>
            <li>
                <NavLink exact activeClassName="active" to="/">Home</NavLink>
            </li>
            <li>
                <NavLink activeClassName="active" to="/users">Users</NavLink>
            </li>
            <li>
                <NavLink activeClassName="active" to="/contact">Contact</NavLink>
            </li>
        </ul>

    </div>
</Router>

     );
  }
}

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

Индекс. css

body {
  margin: 0;
  padding: 2rem;
  font-family: sans-serif;

}

/* a, a:hover {
  color: black;
} */

a.active {
  color: red;
}