NavLink 活动样式不起作用 |反应路由器答案

【问题标题】：NavLink active styling does not work | React RouterNavLink 活动样式不起作用 |反应路由器
【发布时间】：2020-02-05 14:32:35
【问题描述】：

我将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

React 路由器版本：^5.1.2

Screenshot of DevTools Component for active NavLink

Screenshot of DevTools Component for Link child

最后编辑：好的，谢谢大家的回复。没有一个有用，所以我将离开这个功能并做一个解决方法。

【问题讨论】：

如果您在开发工具中检查链接，您是否看到正在应用的活动类然后立即被删除？
它对我来说非常好用。您还有其他错误吗？
杰里米，不，活动课程根本没有得到应用。 sina_r，没有其他错误。

标签： reactjs react-router

【解决方案1】：

以下代码适用于我：

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;
}

【讨论】：

1.你拿出了路线，所以它不会真正起作用。 2. 重新添加路由后就不行了。
它适用于我，即使其中有路线。我只是为了更好地了解代码而将其取出。也许您可以分享一个实时编辑器的链接，这样我就可以看到您的问题所在。
它实际上在沙盒上工作。 codesandbox.io/s/nervous-haibt-k2cvv 上面的代码与我在本地编辑器上的代码相同，但测试文件除外。我将在问题中添加 package.json 文件。如果那里有什么问题。
我检查了 package.json 文件，似乎一切正常。我为我尝试过，它再次起作用。如果小提琴奏效，您使用本地编辑器运行应用程序的方式可能有问题？
我在 VS Code 中打开了应用程序。我用npm start 运行它。

【解决方案2】：

当我卸载软件包 gh-pages 并重新安装时，我已经解决了这个问题

【讨论】：

哦，真的吗？我会试试然后回复你。它是反应引导的一部分吗？顺便抱歉回复晚了。

【解决方案3】：

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

.active {
  color: red;
}

【讨论】：

【解决方案4】：

React 路由器 v6：

来源：Active NavLink Classes with React Router

使用className 属性，该属性现在接受一个函数并传递一个isActive 布尔属性，如下所示：

<NavLink
  to="users"
  className={({ isActive }) => (isActive ? 'active' : 'inactive')}
>
  Users
</NavLink>

您也可以添加多个类，因为 v6 已发布：

<NavLink
  to="users"
  className={({ isActive }) =>
    isActive ? 'bg-green-500 font-bold' : 'bg-red-500 font-thin'
  }
>
  Users
</NavLink>

查看现场演示：Active NavLink Classes with React Router

【讨论】：