Question

在这里，我创建了一个导航栏，并且还添加了Navlink来标记访问页面。但是很不幸，我的activeClassName不能为我工作。这是我到目前为止所做的：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { Route, NavLink, BrowserRouter as Router, Switch} from 'react-router-dom'
import App from './App';
import About from './components/aboutUs';
import Contact from './components/contactUs';
const routing = (
    <Router>
        <div>
            <nav className='nav bg-dark text-warning sticky-top p-2'>
                <NavLink exact activeClassName='active_nav' to='/' className='nav-link font-weight-bold'>Home</NavLink>
                <NavLink  activeClassName='active_nav' to='/about' className='nav-link font-weight-bold'>About Us</NavLink>
                <NavLink  activeClassName='active_nav' to='/contact' className='nav-link font-weight-bold'>Contact Us</NavLink>
            </nav>

            <Switch>
              <Route exact path="/" component={App} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
            </Switch>
        </div>
    </Router>
)

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

index.css

.active_nav {
  color: orange ;
  font-weight: bolder;
  border-bottom: 3px solid #29b6f6;
  transition: border-bottom .5s ease-in-out;
}

即使在访问了各自的路线后，活动链接也没有受到重视。

为什么Navlink activeClassName在我的ReactJs项目中不起作用？

0 个答案: