페이지를 새로 고치지 않고 React-Router에서 Url 매개변수를 처리하는 방법

이번에는 React-Router에서 Url 매개변수를 처리하는 방법을 알려드리겠습니다. 페이지가 새로고침되지 않습니다. notes는 무엇인가요? 실제 사례를 함께 살펴보겠습니다.

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue 프로젝트를 서버에 패키징하는 방법

webstorm을 사용하여 *.vue 파일을 추가하는 방법

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