Question

我正在学习React Router，并关注this tutorial 除了突出显示活动NavLink的问题外，其他所有内容都按指示操作（感谢作者）。

看看css文件并注意.current类：

nav ul {
  list-style: none;
  display: flex;
  background-color: black;
  margin-bottom: 20px;
}

nav ul li {
  padding: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

.current {
  border-bottom: 4px solid white;
}

当我加载应用程序时，导航栏中的Home链接会以白色底边框线突出显示，但是即使单击“关于”链接或“联系”链接，它也会保持突出显示状态。我一步一步地遵循了所有步骤，但是这个问题我无法弄清楚。

在阅读有关NavLink的react文档以及许多在线教程之后，仍然不知道如何解决它。

这是当我单击“关于”链接时

这是当我单击“联系人”链接时

这是教程如何路由示例

<nav>
    <ul>
      <li><NavLink exact activeClassName="current" to='/'>Home</NavLink></li>
      <li><NavLink exact activeClassName="current" to='/about'>About</NavLink></li>
      <li><NavLink exact activeClassName="current" to='/contact'>Contact</NavLink></li>
    </ul>
  </nav>

请注意，尽管Home链接不再是活动链接，但它如何保持其下方的活动白线。

添加activeClassName =“ current”假定使用白色下划线突出显示当前视图，但是主链接仍然使用白色下划线突出显示。

因此，对于拥有多年经验的所有人，请提供帮助。

这是我的app.js

    import React, { Component } from 'react';
import './App.css';
import Main from './components/main';
import Navigation from './components/navigation';




class App extends Component {
  render() {
    return (
        <div>
            <h1> React Router </h1>;
            <h5>  import 'BrowserRouter' from 'react-router-dom' in Appjs</h5>
            <hr></hr>

            <Navigation />

            <Main />
            </div>

    );
  }
}

 export default App;

这是我的index.js

    import React from 'react';
import ReactDOM from 'react-dom';
//Add browserrouter to use it in your app
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//this router example is from this site 
//https://blog.pusher.com/getting-started-with-react-router-v4/
/*
You can only pass a single child element to a Router,
so it is necessary to create a root component
that renders the rest of your application and
then pass that in as the child of the Router.
*/
ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>
), document.getElementById('root'));

这是我的main.js

 import React, { Component } from 'react';
import { NavLink, Switch, Route } from 'react-router-dom';
import Home from './home';
import About from './about'
import Contact from './contact'

class Main extends Component {
    render() {
        return (
            <div>
                <p> My main component </p>
                <Switch>
                    <Route exact={true}  path='/' component={Home}></Route>
                    <Route   path='/about' component={About}></Route>
                    <Route   path='/contact' component={Contact}></Route>
                    </Switch>
            </div>
        );
    }
}

export default Main;

最后是我的navigation.js

    import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

class Navigation extends Component {
    render() {
        return (
            <div>
            <p> My Navigation component </p>
            <nav>
                <ul>
                    <li><NavLink to='/'> Home </NavLink> </li>
                    <li><NavLink to='/about'> About </NavLink> </li>
                    <li><NavLink to='/contact'> Contact </NavLink> </li>
                </ul>
            </nav>
                </div>
        );
    }
}

export default Navigation;

Answer 1

更改为此：

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

class Navigation extends Component {
  render() {
    return (
      <div>
        <p> My Navigation component </p>
        <nav>
          <ul>
            <li><NavLink to='/' activeClassName="current" exact={true}> Home </NavLink> </li>
            <li><NavLink to='/about' activeClassName="current"> About </NavLink> </li>
            <li><NavLink to='/contact' activeClassName="current"> Contact </NavLink> </li>
          </ul>
        </nav>
      </div>
    );
  }
}

export default Navigation;

Answer 2

您应该将exact属性添加到您的root（“ \”）路由中，否则，它将匹配以“ \”开头的所有路由，React Router exact

例如：

<Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/topics" component={Topics} />

Answer 3

必须向NavLink组件提供精确的道具。

它的工作原理如下：家图片

当用户单击“主页”时，URL ='/ me'，它将加载主页组件；当用户单击“图片”时，URL ='/ me / pictures'，如果NavLink中未提供确切信息，则两个URL包含“ / me”，这使它们都处于活动状态。

它是NavLinks确切支持的用例。

Answer 4

对于v6，使用end代替exact

<NavLink end activeClassName="activeNavLink" to="/">

Answer 5

您可以在 Navlinks 中根据需要使用精确和严格。

react路由器中的activeClassName同时突出显示两个NavLink

5 个答案: