해결됨: 반응 라우터 다시 로드 페이지를 찾을 수 없음

React Router 재로드 페이지를 찾을 수 없는 것과 관련된 주요 문제는 사용자가 페이지를 새로 고칠 때 브라우저가 현재 URL에 대해 서버에 요청을 시도한다는 것입니다. 그러나 React Router는 클라이언트 측 라우팅이므로 URL에 해당하는 서버 경로가 없으므로 404 Not Found 오류가 반환됩니다. 이는 사용자가 새로고침 시 특정 콘텐츠가 나타나기를 기대하는 경우 특히 문제가 될 수 있습니다.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// 1행: 이 행은 react-router-dom 라이브러리에서 BrowserRouter, Route 및 Switch 컴포넌트를 가져옵니다.

// 3행: 이 행은 JSX 코드를 반환하는 App이라는 함수를 정의합니다.

// Line 5: 이 라인은 react-router-dom의 Router 구성 요소에서 전체 JSX 코드를 래핑합니다.

// 6행: 이 행은 react-router-dom에서 Switch 구성 요소의 모든 경로를 래핑합니다.

// Lines 7 – 9: 이 라인은 '/' 및 '/about'에 대한 두 개의 경로를 각각 해당 구성 요소(Home 및 About)와 함께 정의합니다.

// Lines 11 – 12: 이 라인은 일치하는 다른 경로가 없을 때 "페이지를 찾을 수 없음"이라는 h1 태그를 렌더링하는 경로를 정의합니다.

페이지를 찾을 수 없음 오류

React Router에서 페이지를 찾을 수 없음 오류는 사용자가 존재하지 않는 페이지나 경로에 접근하려고 할 때 발생하는 오류입니다. 이는 사용자가 URL을 잘못 입력했거나 액세스하려는 페이지가 제거 또는 이동된 경우에 발생할 수 있습니다. React Router에서 이 오류는 다음을 사용하여 처리됩니다. 구성 요소의 렌더링 소품 및 404 페이지를 반환하는 함수를 전달합니다. 이를 통해 개발자는 유용한 링크 또는 사과 메시지와 같이 원하는 콘텐츠로 사용자 지정 404 페이지를 만들 수 있습니다.

반응 라우터에서 페이지를 찾을 수 없는 경우 어떻게 처리합니까?

React Router를 사용할 때 URL이 기존 경로와 일치하지 않을 때 NotFound 구성 요소를 렌더링하는 사용자 정의 경로를 생성하여 찾을 수 없는 페이지를 처리할 수 있습니다. 이렇게 하려면 경로가 "*"로 설정된 새 경로를 만들고 NotFound 구성 요소를 렌더링해야 합니다.

예 :

} />

이는 기존 경로와 아직 일치하지 않은 모든 URL과 일치하고 NotFound 구성 요소를 렌더링합니다.

반응하는 페이지를 강제로 다시 로드하는 방법

React Router에서는 히스토리 객체의 교체 방법을 사용하여 페이지를 강제로 다시 로드할 수 있습니다. 이렇게 하면 기록 스택의 현재 항목이 새 항목으로 대체되어 페이지를 강제로 다시 로드합니다. 이 방법을 사용하려면 먼저 기록 개체에 대한 액세스 권한을 얻어야 합니다. 라우터 구성 요소를 만들 때 소품으로 전달하여 이를 수행할 수 있습니다.

const AppRouter = () => (

{/* 귀하의 경로는 여기 */}

);

히스토리 객체에 액세스할 수 있으면 다음과 같이 교체 방법을 사용할 수 있습니다.

history.replace('/some-route');