집 >웹 프론트엔드 >JS 튜토리얼 >반응 라우터에서 라우팅을 제어하기 위해 기록을 사용하는 방법(자세한 튜토리얼)

반응 라우터에서 라우팅을 제어하기 위해 기록을 사용하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-12 18:17:465662검색

이 글은 주로 React-Router v4가 라우팅 점프를 제어하기 위해 히스토리를 어떻게 사용하는지에 대한 관련 정보를 샘플 코드를 통해 매우 자세하게 소개합니다. 이는 모든 사람의 학습이나 작업에 필요한 특정 참고 학습 가치를 가지고 있습니다. , 저를 팔로우하고 함께 배워보세요.

머리말

React Router v4가 공식적으로 출시된 지 오랜 시간이 지났습니다. 이번 주에 이전 라우팅이 여전히 v2.7.0을 사용하고 있었기 때문에 라우팅을 업그레이드하기로 결정했습니다. 자, 다음은 그냥 "맛보세요"...

현재 공식에서는 2.x와 4.x 두 가지 버전을 유지하고 있다는 소문이 있습니다. (ヾ(｡ꏿ﹏ꏿ)ﾉﾞ야 지금 이 순간 저처럼 똑똑한 여러분도 알게 되실 거라 믿습니다. ReactRouter v3는 어디로 갔나요? 다 잃어버렸나요?? Bala는 문제가 없습니다??? 감히 완벽한 것을 알려주시겠습니까?) 사실 버전 3.x는 버전 2.x에 비해 새로운 기능을 도입하지 않았으며 버전 2.x에서 사용되지 않는 일부 API에 대한 경고를 제거했을 뿐입니다. 계획에 따르면, 역사적인 수하물이 없는 새로운 프로젝트가 ReactRouter의 안정적인 버전을 사용하려면 ReactRouter 3.x를 사용해야 합니다. 3.x 버전은 현재 베타 단계이지만 4.x 버전 이전에 공식적으로 출시될 예정입니다. 이미 버전 2.x를 사용하고 있는 경우 3.x로 업그레이드해도 추가 코드 변경이 필요하지 않습니다.

문제

react-router v3를 사용할 때 경로를 건너뛰고 싶을 때 보통 이렇게 처리합니다.

react-router에서 browserHistory를 내보냅니다.
우리는 browserHistory.push() 및 기타 방법을 사용하여 라우팅 점프를 작동합니다.

다음과 비슷합니다

import browserHistory from &#39;react-router&#39;;
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
 .then(response => {
 browserHistory.push(&#39;/cart&#39;); //这里
 });
}

그런데!! 문제가 발생하는데, React-Router v4에서는 browserHistory 등의 내보내기가 제공되지 않습니다~~

어떻게 해야 하나요? 라우팅 점프를 어떻게 제어합니까? ? ?

Solution

1. 사용 내역을 제공하는 Router 고급 컴포넌트와 함께 사용하세요~

import React from "react";
import {withRouter} from "react-router-dom";

class MyComponent extends React.Component {
 ...
 myFunction() {
 this.props.history.push("/some/Path");
 }
 ...
}
export default withRouter(MyComponent);

공식적으로 권장되는 방법입니다. 하지만 이 방법은 사용하기가 약간 불편합니다. 예를 들어 redux에서 라우팅을 사용하려는 경우 구성 요소의 기록만 전달할 수 있습니다. .

질문 장의 코드와 마찬가지로 구성 요소에서 기록 매개변수를 전달해야 합니다. . .

2. Context

react-router v4를 사용하면 Router 컴포넌트에서 Contex를 통해 라우터 객체가 노출됩니다~

하위 컴포넌트에서 Context를 사용하면 아래 예시와 같이 라우터 객체를 얻을 수 있습니다~

import React from "react";
import PropTypes from "prop-types";
class MyComponent extends React.Component {
 static contextTypes = {
 router: PropTypes.object
 }
 constructor(props, context) {
 super(props, context);
 }
 ...
 myFunction() {
 this.context.router.history.push("/some/Path");
 }
 ...
}

물론, 이 방법은 주의해서 사용하시고, 사용하지 마세요. 반응은 컨텍스트 사용을 권장하지 않기 때문입니다. 향후 버전에서는 폐기될 수 있습니다.

3.hack

사실 문제는 v3에서 Router 컴포넌트에 전달한 히스토리가 다시 노출되어 호출이 가능하다는 점입니다~~

그리고 React-Router v4의 BrowserRouter 컴포넌트가 자체적으로 생성되었습니다. 그리고 그것은 노출되지 않으며 우리는 그것을 인용하는 것이 허용되지 않습니다. 당황스럽네요~

추천 BrowserRouter를 사용하지 못하고 여전히 Router 컴포넌트를 사용하고 있습니다. 역사는 우리가 스스로 만들고, 다른 곳에서는 우리가 만든 역사를 부른다. 코드를 보세요~

히스토리를 생성합니다

// src/history.js
import createHistory from &#39;history/createBrowserHistory&#39;;
export default createHistory();

Router 컴포넌트를 사용합니다

// src/index.js
import { Router, Link, Route } from &#39;react-router-dom&#39;;
import history from &#39;./history&#39;;
ReactDOM.render(
 <Provider store={store}>
 <Router history={history}>
  ...
 </Router>
 </Provider>,
 document.getElementById(&#39;root&#39;),
);

다른 곳에서도 이렇게 사용할 수 있습니다

import history from &#39;./history&#39;;
export function addProduct(props) {
 return dispatch =>
 axios.post(`xxx`, props, config)
  .then(response => {
  history.push(&#39;/cart&#39;); //这里
  });
}

4. BrowserRouter를 사용해야 합니다

사실 React-Router v4는 권장되는 BrowserRouter 구성 요소이며 세 번째 솔루션에서는 이 구성 요소를 포기하고 Router 구성 요소를 사용하도록 대체했습니다.

해야 할 일. BrowserRouter의 소스코드를 한번 보시면, 문득 이해가 되실 것이라 생각합니다.

소스 코드는 매우 간단하고 별다른 내용은 없습니다. 우리는 완전히 BrowserRouter 구성 요소를 직접 작성한 다음 세 번째 솔루션에서 Router 구성 요소를 교체합니다. 안녕-안녕.

여기서 끝입니다. 현재는 세 번째 방법을 사용하고 있지만 공식적으로는 첫 번째 방법을 사용하는 것이 더 번거로운 것 같습니다. ~

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.

반응 라우터에서 라우팅을 제어하기 위해 기록을 사용하는 방법(자세한 튜토리얼)

관련 기사