브라우저 환경을 대상으로하는 경우 react-router-dom대신 패키지 를 사용해야 합니다 react-router. 이들은 두 개의 개별 패키지를 설치할 필요가 없다는 미묘한 차이로 코어 ( react)와 플랫폼 별 코드 ( react-dom, react-native) 를 분리하기 위해 React와 동일한 접근 방식을 따르고 있으므로 환경 패키지에 모든 것이 포함됩니다. 당신은 필요합니다. 다음과 같이 프로젝트에 추가 할 수 있습니다.
yarn add react-router-dom
또는
npm i react-router-dom
가장 먼저해야 할 일은 <BrowserRouter>응용 프로그램에서 가장 상위 상위 구성 요소로 제공하는 것입니다. <BrowserRouter>HTML5 historyAPI를 사용하고 관리하므로 직접 인스턴스화하여 <BrowserRouter>구성 요소에 소품으로 전달할 필요가 없습니다 (이전 버전에서와 같이).
V4에서는 프로 그래 매틱 방식으로 탐색하려면 애플리케이션에서 최상위 컴포넌트로 제공자 컴포넌트 가있는 한 historyReact를 통해 사용 가능한 오브젝트 에 액세스 해야합니다. 라이브러리는 컨텍스트를 통해 개체 자체를 속성으로 포함 합니다. 인터페이스는 다음과 같은 여러 가지 탐색 방법을 제공합니다 , 그리고 다른 사람의 사이에서. 여기 에서 전체 속성 및 메서드 목록을 확인할 수 있습니다 .context<BrowserRouter> routerhistoryhistorypushreplacegoBack
Redux / Mobx 사용자에게 중요한 참고 사항
애플리케이션에서 redux 또는 mobx를 상태 관리 라이브러리로 사용하는 경우 위치를 인식해야하지만 URL 업데이트를 트리거 한 후 다시 렌더링되지 않는 구성 요소 관련 문제가 발생할 수 있습니다.
컨텍스트 모델을 사용하여 구성 요소로 react-router전달 location하기 때문에 발생 합니다.
connect와 observer는 shouldComponentUpdate 메소드가 현재 props와 다음 props를 얕게 비교하는 컴포넌트를 만듭니다. 해당 구성 요소는 하나 이상의 소품이 변경된 경우에만 다시 렌더링됩니다. 즉, 위치가 변경 될 때 업데이트되도록하려면 위치가 변경 될 때 변경되는 소품이 제공되어야합니다.
이를 해결하기위한 두 가지 접근 방식은 다음과 같습니다.
- 당신의 랩 연결된 길이없는에서 구성 요소를
<Route />. 현재 location객체는 <Route>렌더링하는 구성 요소에 전달 하는 소품 중 하나입니다.
- 연결된 컴포넌트를
withRouter고차 컴포넌트로 감싸십시오 . 실제로는 location소품 과 동일한 효과가 있고 주입 됩니다.
이를 제외하고 권장 사항에 따라 순서대로 프로그래밍 방식으로 탐색하는 네 가지 방법이 있습니다.
1.- <Route>컴포넌트 사용
선언적 스타일을 촉진합니다. v4 이전에는
<Route />구성 요소가 구성 요소 계층의 맨 위에 배치 되었으므로 미리 경로 구조를 고려해야했습니다. 그러나 이제 트리의
어느 위치 에나<Route> 구성 요소 를 배치 할 수 있으므로 URL에 따라 조건부 렌더링을보다 세밀하게 제어 할 수 있습니다. 를 분사 , 및 구성 요소에 소품으로. 탐색 방법 (예를 들면 , , ...)의 특성으로서 사용할 수있는 개체.
RoutematchlocationhistorypushreplacegoBackhistory
, 또는 props Route를 사용 하여을 사용하여 무언가를 렌더링하는 방법에는 3 가지가 있지만, 같은 것을 여러 개 사용하지 마십시오 . 선택은 유스 케이스에 따라 다르지만 기본적으로 처음 두 옵션은 URL 위치와 일치하는 경우에만 컴포넌트를 렌더링 하는 반면 , 컴포넌트 와 함께 경로가 위치와 일치하는지 여부는 렌더링됩니다 (URL을 기반으로 UI를 조정하는 데 유용함) 어울리는).componentrenderchildrenRoutepathchildren
컴포넌트 렌더링 출력을 사용자 정의render 하려면 match, location및을 제외한 원하는 다른 소품을 컴포넌트에 전달하려면 컴포넌트를 함수로 감싸고 옵션을 사용해야합니다 history. 설명하는 예 :
import { BrowserRouter as Router } from 'react-router-dom'
const ButtonToNavigate = ({ title, history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
{title}
</button>
);
const SomeComponent = () => (
<Route path="/" render={(props) => <ButtonToNavigate {...props} title="Navigate elsewhere" />} />
)
const App = () => (
<Router>
<SomeComponent /> // Notice how in v4 we can have any other component interleaved
<AnotherComponent />
</Router>
);
withRouterHoC 사용
이 고차 컴포넌트는와 같은 소품을 주입합니다 Route. 그러나 파일 당 하나의 HoC 만 가질 수 있다는 제한이 따릅니다.
import { withRouter } from 'react-router-dom'
const ButtonToNavigate = ({ history }) => (
<button
type="button"
onClick={() => history.push('/my-new-location')}
>
Navigate
</button>
);
ButtonToNavigate.propTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired,
}),
};
export default withRouter(ButtonToNavigate);
Redirect구성 요소 사용
를 렌더링하면
<Redirect>새 위치로 이동합니다. 그러나
기본적으로 현재 위치는 서버 측 리디렉션 (HTTP 3xx)과 같은 새로운 위치로 대체됩니다. 새 위치는
toprop 에 의해 제공되며 문자열 (리디렉션 할 URL) 또는
location객체 일 수 있습니다.
새 항목을 히스토리 로
푸시하려면push 소품도 전달 하고로 설정하십시오.
true
<Redirect to="/your-new-location" push />
router컨텍스트를 통해 수동으로 액세스
컨텍스트 는 여전히 실험적인 API이므로 React의 향후 릴리스에서 중단 / 변경 될 가능성이 있기 때문에 약간 실망 했습니다.
const ButtonToNavigate = (props, context) => (
<button
type="button"
onClick={() => context.router.history.push('/my-new-location')}
>
Navigate to a new location
</button>
);
ButtonToNavigate.contextTypes = {
router: React.PropTypes.shape({
history: React.PropTypes.object.isRequired,
}),
};
말할 것도없이 메모리에<NativeRouter> 탐색 스택을 복제하고 패키지를 통해 사용 가능한 React Native 플랫폼을 대상 으로 하는 것과 같은 비 브라우저 에코 시스템을위한 다른 라우터 구성 요소도 있습니다 .react-router-native
자세한 내용은 공식 문서를 참조하십시오 . 라이브러리의 공동 저자 중 한 명이 반응 라우터 v4에 대한 멋진 소개를 제공 하는 비디오 가 있으며 주요 변경 사항 중 일부를 강조 표시합니다.