>

사용자가 어떤 구성 요소를 사용하든 활성 클래스를 추가하려고했습니다. activeClassName을 사용하는 방법을 잘 모르겠습니다.

JSX code :

import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
class Navbar extends Component {
  state= {};
  render() {
    return (
      <nav class="navbar sticky-top navbar-expand-lg">        <Link to="/">          <a class="navbar-brand" href="#">            Web_Env
          </a>        </Link>        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >          <span class="navbar-toggler-icon"></span>        </button>        <div class="collapse navbar-collapse" id="navbarNavDropdown">          <ul class="navbar-nav mr-auto">            <li class="nav-item">              <a class="nav-link" href="#">                Create post
              </a>            </li>          </ul>          <ul class="navbar-nav ml-auto">            <li class="nav-item">              <NavLink to="/login" style={{ textDecoration: 'none' }}>                <a
                  className="nav-link"
                  href="#"
                  activeClassName="nav-link--active"
                >                  Login
                </a>              </NavLink>            </li>            <li class="nav-item">              <NavLink to="/register" style={{ textDecoration: 'none' }}>                <a className="nav-link" href="">                  Register
                </a>              </NavLink>            </li>          </ul>        </div>      </nav>    );
  }
}
export default Navbar;

Css code :

$color1: #aceca1;
$bgcolor1: #629460;
.navbar {
  background-color: $bgcolor1 !important;
  .navbar-brand {
    color: lighten($color1, 10%);
    font-weight: bold;
    font-size: 2em;
  }
  a.nav-link {
    color: $color1;
    font-size: 1.1em;
    transition: 200ms;
  }
  a.nav-link .active {
    color: white;
    font-size: 1.3em;
  }
  a.nav-link:hover {
    color: white !important;
    transform: scale(1.1);
    text-decoration: none !important;
  }
}

사용자가 어느 페이지에 있는지에 따라 앵커 태그의 스타일을 어떻게 변경할 수 있습니까? 예를 들어 레지스터에 있으면 탐색 모음의 레지스터가 굵게 표시되고 글꼴이 더 커집니다.

이것이 귀하의 질문에 대답합니까? React Router에서 링크에 활성 클래스를 추가하려면 어떻게해야합니까?

SuleymanSah2021-04-17 20:05:31

관련 자료

  • 이전 emacs - Linux 내부 가상 머신에서는 Magit 상태가 느리지 만 기본 MacOS에서는 빠릅니다
  • 다음 emacs - 소스에서 설치할 때 아랍어에 대한 BIDI 지원?