Programing

반응 라우터 activeClassName이 하위 경로에 대한 활성 클래스를 설정하지 않음

c10106 2022. 4. 7. 21:07
반응형

반응 라우터 activeClassName이 하위 경로에 대한 활성 클래스를 설정하지 않음

<ul className="right hide-on-med-and-down">
  <li><IndexLink to="/" activeClassName="active">ABOUT</IndexLink></li>
  <li><Link to="blog" activeClassName="active">BLOG</Link></li>
  <li><Link to="discover" activeClassName="active">DISCOVER</Link></li>
  <li><Link to="contact" activeClassName="active">CONTACT</Link></li>
 </ul>

내 네비게이션은 이렇게 생겼고, /blog로 이동하면 블로그가 활성화된다. 그러나 /blog/my-blog-post로 이동하면 활성 클래스가 사라지는데, 내 블로그 목록 항목에 /blog/my-blog-post가 활성 클래스를 설정하도록 하는 방법이 있는가?

<Route path="blog" component={Blog}>
  <Route path=":slug" component={Blog}></Route>
</Route>

나는 단지 나의 항로를 위와 같이 선언해야만 했고 그것은 효과가 있었다!이 링크는 다음과 같은 도움이 되었다.https://github.com/reactjs/react-router/issues/1684

참조URL: https://stackoverflow.com/questions/37094748/react-router-activeclassname-doesnt-set-active-class-for-child-routes

반응형