React-Router와의 활성 링크?

React-Router와의 활성 링크?

---

React-Router (v4)를 시도 중이며 Nav를 시작하여 Link's 중 하나를 사용하는 데 문제가 있습니다 active. Link태그 중 하나를 클릭 하면 활성 항목이 작동하기 시작합니다. 그러나 홈 Link이 /경로 에서로드되는 구성 요소이기 때문에 앱이 시작되는 즉시 활성화 되기를 원합니다 . 이것을 할 방법이 있습니까?

내 현재 코드는 다음과 같습니다.

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
        <Link activeClassName='is-active' to='/about'>About</Link>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

---

<Link>더 이상 activeClassName또는 activeStyle속성 이 없습니다 . react-router v4에서 <NavLink>조건부 스타일을 지정하려면 다음 을 사용해야 합니다.

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
        <NavLink activeClassName='is-active' to='/about'>About</NavLink>
      </Nav>

      <Match pattern='/' exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

나는 집에 정확한 속성을 추가 <NavLink>내가 꽤 확실하기 때문에 그것없이, 홈 링크는 항상 활성화 될 것이라고 해요 /일치합니다 /about그리고 당신은 다른 페이지.

---

내가 파티에 늦었다는 것을 알고 있지만 인라인 스타일을 설정하여 처리합니다. :focus{당신의 스타일이 무엇이든간에} 대부분의 스타일링을 인라인으로 처리합니다.하지만 이것이 일반 스타일 시트에서도 작동 할 것이라고 확신합니다. 그냥 사용

:focus

대신에

:active

편집하다

나는 몇 가지 이유로 (주로 임베디드 소프트웨어) CSS 스타일 시트를 사용할 수 없습니다. 그래서 저는 인라인 스타일링을 좋아하게되었습니다 (의견과 달리 인라인 스타일은 성능에 영향을주지 않고 37 개 파일에 걸쳐있는 약 8000 줄의 코드가있는 프로젝트에서 잘 작동했습니다). 하지만 안타깝게도 :active이와 같이 인라인으로 사용 하면 선택기가 버그가 발생하므로 위의 방법을 사용합니다.

이를 수행하는 또 다른 방법은 인라인 스타일이 다소 눈살을 찌푸리는 것을 알고 있기 때문에 activenav 요소에 대해 원하는 스타일 로 CSS 클래스 를 만들고 현재 페이지를 높은 위치로 추적하는 상태 변수를 유지하는 것입니다. (가급적이면 루트 구성 요소)에 익숙한 범위로 범위를 지정하고 사용자가 다른 페이지로 이동할 때 업데이트하십시오. 이는 래핑 <Redirect/>하거나 <Link to={}/>업데이트 상태 및 탐색을 처리하는 기능적 구성 요소를 사용하여 수행 할 수 있으며 탐색 구성 요소에서 렌더링이 현재 페이지와 일치하는지 탐색 요소가 일치하는지 확인하고, 그렇다면 activeCSS 클래스를 여기에 추가합니다 .

참조 URL : https://stackoverflow.com/questions/41131450/active-link-with-react-router