Question

我将activeClassName应用于<NavLink>，但是当它在页面上时不会设置样式。相反，当单击链接时，将为链接设置样式，但是在释放单击时，它将恢复原状。这是screenshot。我也尝试过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"
    ]
  }
}

这是我关注的tutorial。我知道这是一个重复的问题，但是没有一个答案可以帮助您。

浏览器经过以下测试：

Firefox开发人员版73.0b12（64位）
Google Chrome 79.0.3945.130（正式版本）（64位）

反应版本：^ 16.12.0

反应路由器版本：^ 5.1.2

Screenshot of DevTools Component for active NavLink

Screenshot of DevTools Component for Link child

最后编辑：好的，谢谢您的回答。没有一个对您有帮助，所以我将离开此功能并进行解决。

Answer 1

以下代码对我有用：

display: list-item

Index.css

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();

}

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

Answer 2

当我卸载软件包 gh-pages 并重新安装

时，我已经解决了这个问题

Answer 3

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

.active {
  color: red;
}

NavLink主动样式不起作用|反应路由器

3 个答案: