React Router v6의 구성 요소 외부에서 기록 개체에 어떻게 액세스하고 사용할 수 있나요?

React Router v6에서 구성요소 외부 탐색

React Router v5에서는 구성요소 외부에 히스토리 객체를 생성하고 이를 Router에 전달하여 사용할 수 있었습니다. 외부 상황에서. 그러나 이는 React Router v6에서는 직접적으로 가능하지 않습니다.

사용자 정의 라우터 구현

한 가지 해결 방법은 React Router v6 라우터와 유사한 방식으로 기록 상태를 인스턴스화하는 사용자 정의 라우터를 구현하는 것입니다. 예를 들면 다음과 같습니다.

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

이 사용자 정의 라우터는 사용자 정의 기록 개체를 사용하고 탐색 상태를 관리합니다. 그런 다음 기본 라우터를 이 사용자 정의 라우터로 교체하여 원하는 동작을 얻을 수 있습니다.

unstable_HistoryRouter

대체 접근 방식은 React Router v6에서 내보낸 불안정한_HistoryRouter를 활용하는 것입니다. 히스토리 라이브러리의 인스턴스를 prop으로 사용하여 외부에서 사용할 수 있습니다.

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);

unstable_HistoryRouter는 향후에 브레이킹 체인지가 적용될 수 있다는 점에 유의하세요.

다음에서 탐색 RRDv6.4 )

React Router v6.4 이상을 사용하고 데이터 라우터를 사용하지 않은 경우에도 여전히 불안정한_HistoryRouter에 액세스할 수 있습니다. 그러나 데이터 라우터의 경우 라우터 개체에 연결된 탐색 기능을 활용할 수 있습니다.

import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

...

router.navigate(targetPath, options);

위 내용은 React Router v6의 구성 요소 외부에서 기록 개체에 어떻게 액세스하고 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!