React-router 4 경로 감청 실현

React-router 4
React Router 4 는 순수 React 재 작성 패키지 입 니 다.현재 버 전에 서 는 경로 설정 이 필요 없 으 며 모든 구성 요소 가 있 습 니 다.
문제 의 출발점
최근 새로운 H5 프로젝트 에서 react router 4("react-router-dom":"^4.2.2")를 사 용 했 습 니 다.프로젝트 의 일부 페이지 는 app 클 라 이언 트 의 친구 들 에 게 사용 해 야 합 니 다.그러면 H5 프로젝트 의 title 은 변 함 이 없고 해당 페이지 의 title 을 표시 해 야 하기 때문에 경로 변경 을 감청 하여 title 을 변경 해 야 합 니 다.
사고의 방향
react 에서 예 를 들 어 부모 경로 에 두 개의 키 경로 가 있 습 니 다.두 개의 키 경로 구성 요소 의 내용 은 모두 부모 경로 의 일부분 에 속 합 니 다.서브 경로 전환 을 통 해 서로 다른 내용 을 표시 합 니 다.이런 상황 에서 부모 구성 요소 의 생명 주기 함수 인 componentWillUpdate 는 모두 하위 경로 전환 을 할 때 실 행 됩 니 다.이 사고방식 에 따라 react-router 4 의 모든 구성 요소 의 특성 을 결합 하면 우 리 는 하나의 인덱스 페이지 구성 요소 로 모든 1 단계 루트(다른 다단 계 루트 는 대응 하 는 1 단계 루트 구성 요소 에 넣 을 수 있 음)를 배치 할 수 있다.루트 를 전환 하면 이 인덱스 페이지 구성 요소 에서 루트 의 변동 을 실시 간 으로 감청 할 수 있다.
프로젝트 디 렉 터 리 구조

src/app.js

...
export default class App extends Component {
  render() {
    return (
      <Router>
        <Route path="/" component={IndexPage}/>
      </Router>
    )
  }
}

src/pages/index.js

...
export default class IndexPage extends Component {
  componentDidMount() {
    this.updateTitle(this.props);
  }

  componentWillUpdate(nextProps) {
    this.updateTitle(nextProps);
  }

  updateTitle = (props) => {
    routes.forEach(route => {
        if (route.path === props.location.pathname) {
          document.title = route.title;
        }
    })
  }
  render() {
    return (
      <div className="index-page">
        <Switch>
          ...
                
          ...
        </Switch>
      </div>
    )
  }
}

이 구성 요소 에서 경로 가 바 뀌 면 실시 간 으로 감청 하고 경로 의 유래 를 얻어 title 을 바 꿀 수 있 습 니 다.
총결산
react-router 4 모든 구성 요소 의 특성 과 수명 주기 함 수 를 이용 하여 경로 변동 을 감청 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.