Блог

Я использую react со стилизованным компонентом и react-прокрутку, чтобы создать простое меню. Я хочу сделать одностраничное приложение. Все в порядке, но когда я перехожу к определенному разделу своей страницы, он должен показать мне, что вкладка активирована на моем навигаторе. но это вообще не работает.

 <Nav>
        <NavBarCotainer>
          <NavMenu>
            <NavItem>
              <NavLink
                to="about"
              >
                About Us
              </NavLink>
            </NavItem>
          </NavMenu>
        </NavBarCotainer>
      </Nav>
 

и в моем компоненте стиля у меня есть

 export const NavLink = styled(LinkS)`
  color: blue;
  amp;:active {
    color: red;
  }
`;
 

это работает, когда я нажимаю на любую из ссылок, она быстро меняется на красную, но снова становится синей, и когда я посещаю этот раздел, она вообще не становится красной.

если я изменю это на:

   amp;.active {
    color: red;
  }

import { Link as LinkS } from "react-scroll";
 

это вообще ничего не даст, когда я посещаю раздел страницы, он всегда будет синим.

Как я могу исправить эту проблему, что я делаю не так?

Вы можете использовать модуль radium для реализации псевдо-css.

 import Radium from 'radium'

const style = {
  color: 'blue',
  ':active': {
    color: 'red'
  }
};

const MyComponent = () => {
  return (
    <Nav>
    <NavBarCotainer>
      <NavMenu>
        <NavItem>
          <NavLink
            to="about"
            style={style}
          >
            About Us
          </NavLink>
        </NavItem>
      </NavMenu>
    </NavBarCotainer>
  </Nav>
  );
};

const MyStyledComponent = Radium(MyComponent);