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