NavLink不添加activeClassName属性 (react-router-dom v5.2.0)

Question

我在Nav Link中遇到了一个小问题。

尽管它能够正常工作(跳转到所需路径，渲染所需组件)，但它没有应用active Class Name。

react-router-dom 版本为 5.2.0。

我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './components/App';

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

还有我的 Navigation.js 文件：

import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav className="navigation">
      <ul className="navigation__list">
        <li>
          <NavLink to="/" activeClassName="navigation__item_active" className="navigation__item">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/frontend" className="navigation__item" activeClassName="navigation__item_active">
            frontend
          </NavLink>  
        </li> 
        <li>
          <NavLink to="/about" className="navigation__item" activeClassName="navigation__item_active">
            about
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation; 

更新：

路由器工作正常，问题出现在NaVLink中。

我需要将activeClassName添加到导航项中，但它没有生效。

我的App.js文件：

import React from 'react';
import Header from './Header';
import Footer from './Footer';
import Main from './Main';

function App() {
  return (
    <div className="App">
      <Header/>
      <Main/>
      <Footer/>
    </div>
  );
}

export default App; 

以及 Main.js：

import React from 'react';
import { Route } from 'react-router-dom';
import HelloPage from './Hello-page';
import About from './About';
import Frontend from './Frontend';
import Navigation from './Navigation';

function Main() {
  return (
    <main className="main">
      <Route exact path="/">
        <HelloPage/>
      </Route>
      <Route path="/about">
        <About/>
      </Route>
      <Route path="/frontend">
        <Frontend/>
      </Route>
      <Navigation/>
    </main>
  );
}

export default Main; 

- Eugene Denisov

---

你能展示一下你的 <App />，其中包含 Switch 吗？ - lala

在 Main.js 的所有 Routes 之间添加和包装 Switch 是否会有任何区别？ - lala

不，它不起作用。 - Eugene Denisov

Answer 1

用一个命令就解决了it问题...（花费了我10个小时）

npm i path-to-regexp@1.7.0 -S

- Eugene Denisov

Answer 2

如我在此处所提到的，在我的案例中解决方案是替换webpack。

resolve: {
    modules: [
      path.resolve('./src'),
-     path.resolve('./node_modules'),
+    'node_modules',
    ],
  },

- Oleg

Answer 3

应该已经可以工作了~

顺便说一下，即使你应用了那些activeClassName。你仍然需要调整你的代码在App.js中像这样：

• 只需要为主页或/路由添加Redirect。如果不是，activeClassName将始终应用于主页或/路由

• App.js：

export default function App() {
  return (
    <Router>
      <Nav />
      <Switch>
        {/* Add this Redirect */}
        <Redirect exact from="/" to="/home" />
        <Route path="/home" component={() => "Home page"} />
        <Route path="/demo" component={() => "Demo page"} />
        <Route path="/demo2" component={() => "Demo2 page"} />
      </Switch>
    </Router>
  );
}

您可以查看此示例 sandbox 尝试删除Redirect并查看其如何更改

- lala