리액트 라우터 4는 링크의 뷰를 갱신하지 않지만 새로고침 시 갱신한다.

리액트 라우터 4는 링크의 뷰를 갱신하지 않지만 새로고침 시 갱신한다.

다음과 같은 간단한 네비게이션 코드를 사용하고 있습니다.

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>
</Router>

<NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

<NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

URL은 변경되지만 보기는 변경되지 않습니다.그러나 페이지를 새로 고치거나 수동으로 해당 URL로 이동하면 변경됩니다.

다음 항목도 사용할 수 있습니다.

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

다음으로 내보내기 디폴트에서는 다음과 같이 합니다.

export default withRouter(connect(mapStateToProps, {})(Layout));

내보내기 연결이 있는 경우 해당 컴포넌트가 라우터를 사용하는 것을 통지해야 합니다.

그 이유는react-redux connect방법의 실장shouldComponentUpdate소품이 변경되지 않았을 때 컴포넌트가 렌더링되지 않습니다.그리고 이것은 리액트 라우터 4와 상충하고 있습니다.

피하려면 통과하면 된다.{pure: false}로.connectresact-syslogx의 트러블 슈팅 섹션에 설명되어 있습니다.

또 다른 방법은withRouterHOC 또는 패스locationDOCS에 기재되어 있는 바와 같이 소품.

내 Navlinks는 상태 비저장 컴포넌트(또는 바보 컴포넌트)와 내 Navbar의 접힘 상태를 제어하는 컨테이너에 넣어두었습니다.

네비게이션 바의 스위칭 후PureComponent로.Component그 문제가 해결됐어요.

저는 이 문제를 겪었습니다.컴포넌트에 속성 키를 추가하여 해결합니다.Switch with value는 위치 경로 이름과 위치 검색입니다.

라우터 태그가 코드 청크 전체를 랩하고 있는지 확인해 보셨습니까?

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>

  <NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

  <NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>
</Router>

이상하게 보이지만, 에 대한 링크가 포함되어 있습니다.<Router>는 링크를 클릭하면 경로 변경을 라우터 컴포넌트로 전파하고 실제로 라우팅 대상 컴포넌트를 렌더링합니다.방금 아주 비슷한 문제를 스스로 해결했어요.

언급URL : https://stackoverflow.com/questions/43895805/react-router-4-does-not-update-view-on-link-but-does-on-refresh