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

react Router v6: 구성 요소 외부 탐색

React Router v6에서는 기록 개체를 처리하는 방식이 변경되었습니다. v5에서는 공유 기록 개체를 생성하여 라우터에 전달할 수 있지만 v6에서는 다른 접근 방식이 필요합니다.

문제:

외부에서 어떻게 탐색할 수 있나요? 반응 라우터 v6의 구성 요소는 v5의 동작과 유사합니까?

해결책:

이전 동작을 복제하려면 기록 상태를 인스턴스화하는 사용자 정의 라우터를 생성할 수 있습니다. RRDv6 라우터에서와 같이:

<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>

이 사용자 정의 라우터를 애플리케이션에 포함하고 사용자 정의 기록 객체를 전달합니다:

<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 v6은 기록 라우터를 표면화하여 사용자 정의 기록 인스턴스를 전달할 수 있습니다.

<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>

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!