ReactJS路由器activeClassName问题

Posted 2023-03-16

【中文标题】ReactJS路由器activeClassName问题

【英文标题】：ReactJS Router activeClassName issue

【发布时间】：2020-10-18 11:31:05

【问题描述】：

我被这个问题困住了。帮助 帮助！ 我在 npx create-react-app 中使用路由器。我想将 activeClassName 应用到我的 NavLinks，但由于某种原因它不起作用。有人可以向我解释一下，当我点击它时，为什么 activeClassName 不适用于 NavLink。这是代码。

导航组件：

import React from 'react'
import   NavLink  from 'react-router-dom'
import './nav.css'

const nav =()=>
return(
    <nav className='Nav'>
      <ul>
        <li><NavLink className="link" to='/' activeClassName="active">Home</NavLink></li>
        <li><NavLink className="link" to='/work' exact activeClassName="active">Work</NavLink></li>
        <li><NavLink className="link" to='/about' exact activeClassName="active">About</NavLink></li>
        <li><NavLink className="link" to='/skills' exact activeClassName="active">Skills</NavLink></li>
      </ul>
    </nav>
  )
 

 export default nav;

应用组件：

import React,  Component  from 'react';
import './App.css';
import  Route, Switch  from 'react-router-dom'

import Nav from './nav'
import Home from './home'
import About from './about'
import Work from './work'
import Skills from './skills'

class App extends Component 

   render()

   console.log(this.props)
     return (
       <div className="App">
         <Nav/>
         <div>
           <Switch>
             <Route path='/' exact><Home/></Route>
             <Route path='/work' exact><Work/></Route>
             <Route path='/about' exact><About/></Route>
             <Route path='/skills' exact><Skills/></Route>
           </Switch>
         </div>
       </div>
     );
   
 

 export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import  BrowserRouter  from 'react-router-dom'

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

serviceWorker.unregister();

【参考方案1】：

如果根本没有应用样式，那么我认为您的 CSS 中有些地方不太正确。查看您的代码，我希望该样式将应用于您的第一个NavLink，位置为'/'，然后在您单击它时应用于每个后续NavLink。为防止这种情况发生，您必须将 exact 添加到链接到 Home 的链接中

也不需要写出activeClassName="active"，因为“活动”是default given class

【参考方案2】：

像这样将important 添加到您的活动课程中。其他样式可能会覆盖它。另外，请确保您的 CSS 文件位于当前目录中

.active
color:red!important