React Router v6에서 외부 구성 요소를 탐색하는 방법은 무엇입니까?

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

React Router v5에서는 구성요소 외부를 편리하게 탐색할 수 있도록 전역 히스토리 객체를 생성합니다. 그러나 이 동작은 v6에서 즉시 나타나지 않습니다.

사용자 정의 라우터로 탐색 사용자 정의

한 가지 접근 방식은 사용자 정의 기록 개체를 활용하고 탐색 상태를 관리하는 사용자 정의 라우터를 생성하는 것입니다. 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>

이 사용자 정의 라우터를 사용자 정의 기록 객체와 함께 활용하여 기록 객체를 효과적으로 프록시하고 탐색 상태를 관리합니다.

라우터 교환

React 애플리케이션 내에서 기본 라우터를 사용자 정의 라우터로 바꿀 수 있습니다.

<code class="javascript">export default function App() {
  return (
    <CustomRouter history={history}>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </div>
    </CustomRouter>
  );
}</code>

불안정한 기록 라우터

react-router-dom@6은 ' 사용자 정의 기록 라이브러리 인스턴스 삽입을 허용하는 'untable' 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}>
    {/* The rest of your app goes here */}
  </HistoryRouter>,
  root
);</code>

이 API는 불안정한 것으로 표시되며 추가 개선 또는 종속성 관리 고려사항이 필요할 수 있습니다.

RRDv6.4 데이터 라우터

데이터 라우터가 포함된 RRDv6.4에서는 '불안정한' 탐색 기능이 라우터 개체에 의해 직접 노출됩니다.

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

const router = createBrowserRouter(...);

...

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

위 내용은 React Router v6에서 외부 구성 요소를 탐색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!