React-Router와 (과) 관련한 활성 링크입니까?

React-Router (v4)를 시험 중이므로 Link 중 하나가 active이되도록 탐색을 시작하는 데 문제가 있습니다. Link 태그 중 하나를 클릭하면 활성 항목이 작동하기 시작합니다. 그러나 / 경로에로드되는 구성 요소이므로 응용 프로그램이 시작되는 즉시 홈 Link을 활성화해야합니다. 이 일을 할 수있는 방법이 있습니까?React-Router와 (과) 관련한 활성 링크입니까?

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> 
)

출처

2016-12-13 saadq

아래 질문에 대한 답변은 절대적으로 적합합니다. 나는이 대답을 더 일찍 간과하고 그가 옳았다는 것을 깨달았다. 다른 사람들도 그것을 간과하지 않도록 당신이 그것을 받아 들일 것을 제안합니다. – wuno

<Link> 더 이상 activeClassName 또는 activeStyle 속성이 있습니다

여기에 내 현재 코드입니다. 당신이 조건부 스타일을 수행하려는 경우 <NavLink>를 사용할 필요가 V4 라우터 반응에서 :

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 및 보유한 다른 페이지와 일치합니다.

출처

2017-03-29 00:01:45 worc

NavLink를 사용하여 언뜻보기에는 문제를 피할 수 있다고 생각했기 때문에 오늘이 대답을 간과했습니다. 이것을 설명하는 다른 곳을 찾기가 어렵습니다. 사람들은 그가 정확하게 맞기 때문에이 대답을 upvote해야합니다. NavLink를 사용해야합니다. 또한! 정확한 = {true}도 정확하게 맞습니다. 그렇지 않으면 렌더링을하는 첫 번째 링크는 집이 항상 활성 상태가되는 다른 링크를 클릭 할 때 다시 렌더링되지 않습니다. 나는 너에게 10 번 더 upvote 할 수 있으면 좋겠다. – wuno

'NavLink'가 작동했습니다. 감사합니다! –

React-Router와 (과) 관련한 활성 링크입니까?

답변

관련 문제