루트 네브링크는 항상 액티브클래스 React Router Domain을 가져옵니다.

루트 네브링크는 항상 액티브클래스 React Router Domain을 가져옵니다.

사용하고 있다react-router-dom: 4.2.2추가할 수 있습니다.activeClassName이 클래스는 항상 루트 URL에 추가됩니다.

예를 들어 아래 스크린샷과 같은 오류 페이지를 방문하면 홈 네비게이션 링크는 active Class도 가져옵니다.

업데이트: 위 스크린샷에서 다음 사이트를 방문했습니다.http://localhost:3000/#/error그래서...active-link에 추가해야 합니다.Love Error?NavLink만그러나 보다시피 이것은 또한 에 추가되어 있다.HomeNavLink도.

다음은 내 내비게이션 코드입니다.

import React from 'react';
import { NavLink } from 'react-router-dom';

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li> <NavLink to = '/' activeClassName="active-link">Home</NavLink> </li>
    <li> <NavLink to = '/about' activeClassName="active-link">About Us</NavLink> </li>
    <li> <NavLink to = '/error' activeClassName="active-link">Love Error?</NavLink> </li>
  </ul>
)

라우팅에는 다음 스위치를 사용했습니다.

<Switch>
  <Route exact path = '/' component = {Home} />
  <Route exact path = '/about' component = {AboutUs} />
  <Route exact path = '/error' component = {Error404} />
  <Route path = "/news/:id" component = {NewsDetail} />
  <Route path="*" component={Error404} />
</Switch>

예상되는 동작을 얻으려면 어떻게 해야 하나요?

사용하셔야 합니다.isActive={}링크가 활성화 되어 있는지 확인하기 위해 추가 검증을 추가합니다.

문서

작업 jsFiddle. (fiddle은 내가 만든 것이 아님)

추가할 코드는 다음과 같습니다.

jsfiddle의 예

<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>

코드 변경

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

isActive prop를 체크하고 "checkActive"가 함수인지 확인합니다.

const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "/";
}

사용할 수 있는 또 다른 구성은 "정확한"이지만 jsFiddle에서는 이를 시연할 수 없습니다.암호는 다음과 같습니다.

<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>

이게 도움이 됐으면 좋겠다.그리고 더 필요한 정보가 있으면 알려주세요.

나는 그 덧셈을 발견했다.exact첫 번째가 되기 전에activeClassName동작합니다.예를 들어 다음과 같은 설정이 가능합니다.

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li><NavLink to='/' exact activeClassName="active-link">Home</NavLink> 
    </li>
    ....remaining NavLinks
  </ul>
)

사용할 수 있습니다.exact다음과 같은 액티브클래스의 키워드

<NavLink exact to ='/'>Home</NavLink>

그렇게 생성될 것이다

<a href="/" class="active" aria-current="page">Home</a>

또 다른 페이지가 온다면 그렇게 될 것이다.

<a href="/">Home</a>

2022년의 정답은 다음과 같습니다.end소품

<NavLink end {...props} />

문서에 따르면:

엔드 프롭을 사용하면 하위 경로가 일치할 때 이 구성 요소가 "활성"으로 일치하지 않습니다.예를 들어 웹 사이트 루트에서만 활성화되고 다른 URL에서는 활성화되지 않는 링크를 렌더링하려면

<NavLink to="/" end>
  Home
</NavLink>

참고 자료: https://reactrouter.com/en/v6.3.0/api

나는 잘 지내고 있다.

<ul className="menu nav navbar-nav">
      <li><NavLink exact to="/" activeClassName="active-link active2">Home</NavLink></li>
      <li><NavLink to="/financial-summary" activeClassName="active-link active2">Financial Summary</NavLink></li>
      <li><NavLink to="/account-statement" activeClassName="active-link active2">Account Statement</NavLink></li>
      <li><NavLink to="/tools" activeClassName="active-link active2">Tools</NavLink></li>
      <li><NavLink to="/service-charges" activeClassName="active-link active2">Service Charges & Important Information</NavLink></li>
    </ul>

css

.active2, .active2 a:link, .active2 a:visited{
    background: #004B8D !important;
    color: #FFFFFF !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

최근에 이 문제를 발견하고 다음과 같이 추가하여 해결했습니다.

import { withRouter } from 'react-router-dom';

다음으로 컴포넌트를 포장합니다.

export default withRouter(Component);

코드 변경

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

그리고 나서.

const checkActive = (match, location) => {
  console.log(location);
  if (!location) return false;
  const { pathname } = location;
  const { url } = match;
  return pathname === url ? true : false;
};

• 비고 *

const { pathname } = location;
const { url } = match;
return pathname === url ? true : false;

저는 지금 리액트를 배우고 있는데 같은 문제를 발견했습니다.나는 다음을 시도했고 효과가 있었다.

네비게이션 링크는 3개입니다.

<li><NavLink to="/home">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>

그런데 4개 노선을 추가했어요.

<Route exact path="/" component={Home}></Route>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>

같은 컴포넌트(Home)에 2개의 루트(/ 및 /home)를 추가했습니다.이렇게 하면 react-router-dom은 클릭하는 링크에만 클래스를 'active'로 추가하는 것처럼 보입니다.

」를 <Navlink> Web 및 에서는, 「」를 해 주세요.<BrowserRouter><HashRouter>!

텍스트에 .<HashRouter hashType='noslash'>

이 설정에서는

<li><NavLink to="about">About</NavLink></li>

렌더링하다

<a href="#about" aria-current="page" class="active">About</a>

문서

react-router-bootstrap의 Link Container를 사용하고 있는데도 이런 문제가 있었습니다.홈 링크는 항상 활성화되어 있었습니다.

이렇게 링크 경로에 대해 정확한 키워드를 사용하여 해결했습니다.이것을 사용해 주시고, 뭔가 문제가 있으면 도움이 될 수 있도록 하겠습니다.건배.

Header.js 컴포넌트:

  <LinkContainer to="/" exact>
     <Nav.Link>
       <i className="fas fa-home mr-1"></i>Home
     </Nav.Link>
  </LinkContainer>

및 App.js 컴포넌트:

 <Route path="/" component={HomeScreen} exact />
 <Route path="/about" component={AboutScreen} exact />
 <Route path="/blogs" component={BlogScreen} exact />

언급URL : https://stackoverflow.com/questions/47879663/root-navlink-always-get-active-class-react-router-dom