时间戳

首页 > 解决方案 > NavLink 活动样式不起作用 | 反应路由器

reactjs - NavLink 活动样式不起作用 | 反应路由器

问题描述

我申请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();

索引.css

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


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

a.active {
  color: red;
}

包.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"
    ]
  }
}

这是我正在关注的教程。我知道这是一个重复的问题，但没有一个答案能够提供帮助。

浏览器测试：

反应版本：^16.12.0

反应路由器版本：^5.1.2

活动 NavLink 的 DevTools 组件的屏幕截图

Link 子项的 DevTools 组件的屏幕截图

最后编辑：好的，谢谢大家的回复。没有任何帮助，所以我将离开此功能并制定解决方法。

标签： reactjsreact-router

解决方案

a.active不适用于路由器 NavLink 的activeClassName. 您必须引用现有的样式类.active，而不是a. 删除a：

.active {
  color: red;
}

推荐阅读