해결됨: 라우터 404 리디렉션 반응

React Router 404 리디렉션과 관련된 주요 문제는 구현하기 어려울 수 있다는 것입니다. React Router에는 내장된 404 페이지가 없기 때문에 개발자는 수동으로 404 페이지에 대한 경로를 만든 다음 기존 경로와 일치하지 않는 모든 요청을 리디렉션하도록 라우터를 구성해야 합니다. 여기에는 추가 코드 및 구성이 필요하며 시간이 많이 걸리고 문제가 발생할 경우 디버깅하기 어려울 수 있습니다. 또한 사용자가 존재하지 않는 URL로 직접 이동하는 경우 404 페이지로 리디렉션되는 대신 오류 페이지가 계속 표시됩니다.

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

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

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

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

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

// Lines 5-7: 이 라인은 react-router-dom의 라우터 구성 요소에서 앱 구성 요소를 래핑합니다.

// Lines 8-10: 이 라인은 각각 Home 및 About 구성 요소에 대한 두 개의 경로를 정의합니다.

// 12행: 이 행은 일치하는 다른 경로가 없을 경우 홈 페이지로 리디렉션되는 경로를 정의합니다.

404 오류 코드는 무엇입니까

React Router의 404 오류 코드는 요청한 리소스를 찾을 수 없음을 나타내는 HTTP 상태 코드입니다. 일반적으로 사용자가 존재하지 않는 페이지나 경로에 액세스를 시도할 때 반환됩니다. 이는 사용자가 URL을 잘못 입력했거나 링크를 업데이트하지 않고 페이지를 제거하거나 이동한 경우에 발생할 수 있습니다. 이 경우 React Router는 사용자에게 오류를 알리는 적절한 메시지와 함께 일반 404 페이지를 표시합니다.

404 리디렉션

React Router에서 404 리디렉션은 잘못된 URL에 액세스하려고 할 때 사용자를 다른 페이지로 리디렉션하는 방법입니다. 이는 사용자가 잘못된 URL을 입력하거나 존재하지 않는 페이지에 액세스하려고 할 때 더 나은 경험을 제공하는 데 유용할 수 있습니다. 404 리디렉션은 사용자를 리디렉션하려는 페이지의 경로 이름을 지정할 수 있는 React Router의 리디렉션 구성 요소를 사용하여 구현할 수 있습니다. 예를 들어 누군가가 /invalid-url에 액세스하려고 하면 다음과 같이 리디렉션 구성 요소를 사용할 수 있습니다.

관련 게시물:

코멘트 남김