<Route>로 경로를 지정하지 않은 주소를 입력하면 사진처럼 아무런 내용도 뜨지 않는다. 주소에 해당되는 컨텐츠가 없기 때문이다. 이대로 사용시 사용자는 웹사이트가 문제라고 오해할 수도 있기 때문에 주소가 잘못되었다는 메시지를 띄워줘야 한다.

1. Switch

App.js

...
import { Route, Switch } from "react-router-dom";

...

  return (
    <div className="App">
      <Container>
        <Title>내 버킷리스트</Title>
        <Line />
        <Switch>
          <Route path="/" exact>
            <BucketList list={list} />
          </Route>
          <Route path="/detail" component={Detail}></Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
      </Container>
	...
    </div>
  );
}
...
export default App;

우선 오류 화면을 띄울 NotFound.js 파일을 생성한다. App.js로 돌아와 기존에 만들어놨던 페이지 컴포넌트 아래에 <NotFound />를 <Route>로 감싼다. 그럼 기존 페이지 아래에 <NotFound />가 같이 출력된다. <BucketList>와 <Detail>에 exact를 붙여도 마찬가지다.

        <Switch>
          <Route path="/" exact>
            <BucketList list={list} />
          </Route>
          <Route path="/detail" component={Detail}></Route>
          <Route>
            <NotFound />
          </Route>
        </Switch>
        

바로 이럴 때 <Switch>를 사용하면 해결된다. <Route>는 이상이 없는 컴포넌트를 모두 출력한다. 그러나 <Switch>는 각각의 컴포넌트가 부여받은 경로와 URL이 정확히 일치하는 최초의 컴포넌트를 출력한다. 만약 일치하는 컴포넌트가 없다면 path 지정을 하지 않은 컴포넌트가 뜬다. <Switch>가 없을 땐 path를 지정하지 않은 <Route>가 무조건 뜨기 때문이다. <NotFound/>는 "/"와 "/detail"을 제외한 모든 경로에서 적용되는 페이지이므로 path를 지정하지 않는 것이다.

2. 뒤로가기

NotFound.js

import React from "react";
import { useHistory } from "react-router-dom";

const NotFound = (props) => {
    const goBack = useHistory();
  
    return (
        <>
            <h1>Not Found 404</h1>
            <button onClick={() => {
                goBack.goBack();
            }}>Go Back</button> 
        </>
    );
}

export default NotFound;

전 시간에 배운 {useHistory}를 사용해서 <NotFound/>에 뒤로가기 버튼을 달아주었다. 전시간과 달리 push 대신 goBack 속성을 사용했다.
📌 history stack과 push/replace/go