React Router v6에서 외부 구성요소를 어떻게 탐색할 수 있나요?

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

React Router v5에서는 전역 히스토리 객체를 생성하고 이를 라우터에 전달하여 구성요소 외부 탐색을 활성화했습니다. 그러나 이 접근 방식은 v6에서는 더 이상 가능하지 않습니다.

사용자 정의 라우터 접근 방식

이 문제를 해결하려면 React Router v6 라우터와 같은 기록 상태를 인스턴스화하는 사용자 정의 라우터를 생성할 수 있습니다. 예를 들어 BrowserRouter의 경우:

<code class="javascript">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}
    />
  );
};</code>

이는 사용자 정의 기록 개체를 라우터로 프록시하고 탐색 상태를 관리합니다. 원래 Router를 다음 사용자 정의 Router로 교체합니다.

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        {/* ... */}
      </div>
    </CustomRouter>
  );
}</code>

HistoryRouter

React Router v6은 기록 인스턴스에 액세스하기 위해 불안정한_HistoryRouter를 도입합니다.

<code class="javascript">import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory({ window });

ReactDOM.render(
  <HistoryRouter history={history}>
    {/* ... */}
  </HistoryRouter>,
  root
);</code>

이렇게 하면 인스턴스가 내보내집니다. React 구성 요소 외부에서 액세스할 수 있는 히스토리 라이브러리입니다.

데이터 라우터

React Router v6.4에서는 데이터 라우터에 대해 새로운 "연결되지 않은" 탐색 방법을 사용할 수 있습니다.

<code class="javascript">import { createBrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(...);

router.navigate(targetPath, options);</code>

이 방법을 사용하면 라우터의 탐색 기능에 직접 액세스할 수 있어 데이터 라우터를 사용하여 외부 구성 요소를 탐색할 수 있습니다.

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