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>
)
}
}
...
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>
)
}
}
총결산
react-router 4 모든 구성 요소 의 특성 과 수명 주기 함 수 를 이용 하여 경로 변동 을 감청 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
