Question

我有一个小小的React项目，需要导航项来指向React上的不同路线。起初，仅在activeClassName中使用NavLink只能在用户实际键入URL时起作用，而当我使用NavLinks进行导航时则不起作用。然后，我添加了实用程序功能以使导航正常运行，但是后退按钮在活动类上不起作用。

// Navigation Bar to navigate to different pages:
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom';

// import utility function
import {selectNav} from '../../util';


class Navigation extends React.PureComponent {
  render() {
    return (
      <div>
        <ul className="nav">
          <li><NavLink exact to="/" activeClassName='high-lighted' onClick={selectNav}>Home</NavLink></li>
          <li><NavLink to="/history" activeClassName='high-lighted' onClick={selectNav}>History</NavLink></li>
          <li><NavLink to="/gallery" activeClassName='high-lighted' onClick={selectNav}>Gallery</NavLink></li>
          <li><NavLink to="/career" activeClassName='high-lighted' onClick={selectNav}>Career</NavLink></li>
          <li><NavLink to="/contact" activeClassName='high-lighted' onClick={selectNav}>Contact</NavLink></li>
        </ul>
      </div>
    )
  }
}

export default Navigation;

这是我的实用程序功能：

// When clicked add high-lighted class to current select element;
// remove high-lighted class from any other nav links;
export const selectNav=function(event){
    let items = document.querySelectorAll('.nav li');
    items.forEach(item=>item.firstChild.classList.remove('high-lighted'))
    event.target.classList.add('high-lighted');
}

high-lighted是我在此处定义的css类：

.high-lighted{
  border-bottom: 3px solid rgb(28, 141, 185);
}

因此，在使用了实用程序功能之后，我可以使用NavLinks浏览整个页面。但是，使用“后退”按钮导航回上一页不起作用。我该怎么办？

反应NavLink activeClassName与后退按钮不起作用

0 个答案: