[javascript] 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그리고 당신은 다른 페이지.
