React-Router를 새로 고치지 않고 Url의 매개변수 변경하기

이번에는 React-Router에서 Url을 새로 고치지 않고 매개 변수를 변경하는 방법을 소개하겠습니다. React-Router에서 Url을 새로 고치지 않고 매개 변수를 변경할 때의 주의사항은 무엇입니까? 바라보다.

Problem

오늘 페이지 작성 중 문제를 발견했는데, 바로 React Router에서 Url 매개변수 전달 기능을 사용하는 것입니다.

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

공식 문서에 따르면 다음과 같이 사용할 수 있다고 합니다. ChannelPerPage 구성 요소

this.props.match.params

를 사용하여 url 매개변수 값을 가져오는데, 채널 ID가 1에서 2로 변경되는 경우와 같이 이 URL 아래에 있는 URL의 매개변수 부분만 변경하면 페이지가 새로 고쳐지지 않는 것으로 나타났습니다.

Solution

정보를 살펴본 후, 근본 원인은 props를 변경해도 구성 요소가 다시 렌더링되지 않는다는 것을 알았습니다. 상태만 변경하면 구성 요소가 다시 렌더링됩니다. url 매개변수는 props에 속하므로 url 매개변수를 변경해도 구성요소가 다시 렌더링되지 않습니다.

나중에 React 구성 요소에 재정의 가능한 메서드가 있다는 것을 발견했습니다.

componentWillReceiveProps(nextProps) {
 ...
}

이 메서드는 React 구성 요소에서 재정의될 수 있으므로 이 메서드를 사용하여 nextProps를 가져올 수 있습니다. 구성 요소가 다시 렌더링될 수 있도록 이 메서드에 콘텐츠를 명시합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue2.0 입력 상자의 실시간 검색 및 업데이트 구현 단계에 대한 자세한 설명

간단한 장바구니 기능 코드 분석의 JS 구현

위 내용은 React-Router를 새로 고치지 않고 Url의 매개변수 변경하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!