리액트 라우터 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}
로.connect
resact-syslogx의 트러블 슈팅 섹션에 설명되어 있습니다.
또 다른 방법은withRouter
HOC 또는 패스location
DOCS에 기재되어 있는 바와 같이 소품.
내 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
'programing' 카테고리의 다른 글
this.setState가 예상대로 상태를 Marge하지 않습니다. (0) | 2023.03.13 |
---|---|
상대 templateUrl을 로드하는 중 (0) | 2023.03.13 |
React.Children.only react 요소 하위 항목만 수신할 것으로 예상됨React.Children.only react 요소 하위 항목만 수신할 것으로 예상됨그리고...그리고... (0) | 2023.03.13 |
뉴턴소프트.이스케이프 백슬래시가 없는 Json Serialize Object (0) | 2023.03.13 |
Spring Boot 및 Spring Security를 사용하여 REST API를 보호하는 방법 (0) | 2023.03.13 |