реагировать NavLink ActiveClassName не работает с кнопкой назад - PullRequest
0 голосов
/ 26 апреля 2019

У меня есть небольшой проект реагирования, которому нужны элементы навигации, чтобы указывать на разные маршруты при реагировании.Сначала просто используя 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.Однако использование кнопки «Назад» для перехода на предыдущую страницу не работает.Что я могу сделать?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...