BrowserRouter와 history.push()가 있는 라우터

BrowserRouter와 history.push()가 있는 라우터

나는 그 차이를 이해하려고 애쓰고 있다.BrowserRouter그리고.Router의react-router-dom(v5) 패키지와 아래 예제의 차이점.

문서에는 다음과 같이 기재되어 있습니다.

BrowserRouter A는 HTML5 이력 API(pushState, replaceState 및 popstate 이벤트)를 사용하여 UI를 URL과 동기화 상태로 유지합니다.

출처 : https://reacttraining.com/react-router/web/api/BrowserRouter

라우터 모든 라우터 컴포넌트의 공통 로우 레벨인터페이스일반적으로 앱은 다음 중 하나의 고급 라우터를 사용합니다.BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

출처 : https://reacttraining.com/react-router/web/api/Router

HTML5 브라우저 앱에 Browser Router를 사용해야 한다고 알고 있으며, 지금까지 이 작업을 해오고 있습니다.

history.timeout(...)의 예:

제가 지금 하고 있는 건history.push('/myNewRoute')펑크 내:

import history as './history';

...

export function someAsyncAction(input) {
  return dispatch => {
    fetch(`${API_URL}/someUrl`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ input }),
    }).then(() => {
      history.push('/myNewRoute');
    }).catch((err) => {
      dispatch(setError(err));
    })
  };
};

history는 다음 모듈로 정의됩니다.

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

그리고 그리고history라우터에도 전달됩니다.

import { BrowserRouter as Router } from 'react-router-dom';
import history as './history';

...

const App = () => (
  <Router history={history}>
     ...
  </Router>
);

문제: history.push()는 브라우저 바의 URL을 갱신하지만 루트 뒤에 있는 컴포넌트는 렌더링하지 않습니다.

Import 하는 경우Router대신BrowserRouter동작:

// Does not work:
import { BrowserRouter as Router } from 'react-router-dom';

// Does work:
import { Router } from 'react-router-dom';

BrowserRouter는 이력을 자동으로 처리하므로 이력 소품을 무시합니다.리액트 컴포넌트 이외의 이력에 액세스 할 필요가 있는 경우는,Router괜찮을 거야

useHistory 훅을 통해 이력에 액세스할 수 있습니다.let history = useHistory();행하다history.push()브라우저 라우터의 경우.

HTML5 History API 문서를 보면 history API가 자동으로 사용자의 상태를 유지하는 것 같습니다. 처음에 1페이지에 있고 1페이지에 페이지 아웃룩 A가 있다고 가정합니다. 페이지 1 아웃룩을 B로 변경하는 작업을 수행했습니다. 이제 2페이지로 이동하면 브라우저의 뒤로 버튼을 클릭하면 1페이지로 바로 돌아갑니다. History API는 Outlook B를 렌더링하는 것을 알 수 있도록 사용자의 상태를 미리 인식하기 때문에 이를 사용하는 것이 장점입니다. 100% 확신할 수는 없지만 이 기능은 포함되어 있지 않을 것입니다.이 경우 1페이지로 돌아가면 아웃룩 A가 표시됩니다.그건 사실이 아니야.나는 그 차이를 잘 모르겠다.

저도 같은 문제가 있어요.

BrowserRouter그리고.useHistory()이치노 ★★★★★★★★★★★★★★★★★.createBrowserHistory()이치노그러나 당신의 케이스와 같은 레플렉스가에는 페이지가 움직이지 않았습니다.

게다가 내 소스는 BrowserRouter를 사용하여 개발되었기 때문에 Router 컴포넌트로 대체하고 싶지 않습니다.

하지 못한 , 두이 다 것을 if ★★★★★★★★★★★★★★★★★」==것 ..)을 사용하다

이를 해결하기 위해 useHistory()에 의해 취득된 이력 오브젝트의 참조를 글로벌 유틸리티 코드에 저장하여 redux-saga 코드로 사용합니다.그러면 잘 되는 거죠.

이게 최선이라고 생각하지는 않지만, 아직 가장 좋고 공식적인 방법을 찾을 수 없었습니다.

언급URL : https://stackoverflow.com/questions/56707885/browserrouter-vs-router-with-history-push