URL 변경 후 React-Router-Dom 링크 구성 요소가 올바른 구성 요소를 렌더링하지 않는 이유는 무엇입니까?

React-Router-Dom의 링크 태그 문제

React-router-dom은 단일 작업에서 페이지 간 탐색을 위한 Link 구성 요소를 제공합니다. 페이지 응용 프로그램입니다. 그러나 어떤 경우에는 링크 태그를 클릭하면 URL이 변경되지만 해당 구성 요소가 렌더링되지 않는 문제가 발생하는 경우가 있습니다.

설명:

문제 이는 React-router-dom@5와 React@18 버전 간의 호환성 문제에서 비롯됩니다. 특히, 5.3.3 이전 버전의 React-router-dom은 React 18과 완전히 호환되지 않습니다.

해결책:

이 문제를 해결하려면 다음 중 하나를 따르세요. 다음 솔루션을 적용할 수 있습니다:

1. React-Router-Dom 업데이트:

• react-router-dom 버전 5.3.3 이상으로 업데이트하세요. 이 버전에는 이 호환성 문제에 대한 수정 사항이 포함되어 있습니다.

npm uninstall -S react-router-dom
npm install -S react-router-dom@5.3.3

2. React 17로 되돌리기:

• React 17로 다운그레이드하거나 index.js 파일에서 React 17 구문을 사용하세요.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById(&quot;root&quot;)
);

3. 중첩된 React.StrictMode:

• React.StrictMode 구성 요소를 라우터 구성 요소의 하위 구성 요소로 이동합니다.

<BrowserRouter>
  <React.StrictMode>
    ...
  </React.StrictMode>
</BrowserRouter>

4. React-Router-Dom 6으로 업그레이드:

• react-router-dom의 최신 버전(버전 6 이상)으로 업그레이드하고 이에 따라 경로 구문을 조정하세요.

위 내용은 URL 변경 후 React-Router-Dom 링크 구성 요소가 올바른 구성 요소를 렌더링하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!