[React] * 와일드카드 : Route, 잘못된 주소 방지

 

 

💡 페이지에 잘못된 주소가 들어왔을 때 = Route 로 설정해 두지 않은 주소가 입력됐을 때를 !

위해 NotFoundPage 를 설정해두자.

 

<Route path="questions">
  <Route index element={<QuestionListPage />} />
  <Route path=":questionId" element={<QuestionPage />} />
</Route>
<Route path="wishlist" element={<WishlistPage />} />
<Route path="*" element={<NotFoundPage />} />  <!-- 요기 -->

 

* 와일드 카드는 모든걸 포함한다는 뜻

차례대로 Route path 를 비교하다가 일치하는게 없으면

마지막에 있는 * path 의 NotFoundPage 를 렌더링한다!

 

NotFoundPage.jsx

홈으로 돌아갈 수 있도록 버튼에 링크를 걸어뒀다.

function NotFoundPage() {
  return (
    <Container className={styles.container}>
      <Warn
        variant="big"
        title="존재하지 않는 페이지에요."
        description="올바른 주소가 맞는지 다시 한 번 확인해 주세요."
      />
      <div className={styles.link}>
        <Link to="/">
          <Button as="div">홈으로 가기</Button>
        </Link>
      </div>
    </Container>
  );
}

 

 

http://localhost:3000/hi 잘못된 주소를 입력해보면 ~

 

설정해 둔 페이지가 잘 나온다!