4. 잘못된 URL 주소로 들어간다면, Not Found Page 돌려주기

1. 가끔 주소를 잘못 칠 때가 있다.

 

    주소를 잘못 쳤는데, 전혀 이상한 페이지가 나오면, 기분이 상할 수 있다.

    그래도, "너는 아직 우리 웹사이트에 있어!" 라고 말하기 위한 자체 제작 Not Found 페이지를 보여주자

 

2. 와일드 카드 페이지의 사용

     와일드 카드 ( * ) 는 "모든 경로" 를 의미한다.

     Switch 를 통해, 모든 경로에 대해, 순차적으로 하나씩 대조하고 있는데 아무것도 맞는게 없다.

     그렇다면 마지막에 "무조건 들어가지는 페이지" 의 path 로 * 을 준비해주도록 하자.

 

    import { Route, Switch } from "react-router-dom";
    import AllQuotes from "./pages/quotes-all";
    import QuotesDetail from "./pages/quotes-detail";

    import NewQuotes from "./pages/new-quotes";

    function App() {
        return (
            <div>
                <Switch>
                    <Route exact path={"/quotes"}>
                        <AllQuotes />
                    </Route>
                    <Route path={"/quotes/:quotesId"}>
                        <QuotesDetail />
                    </Route>
                    <Route path={"/new-quotes"}>
                        <NewQuotes />
                    </Route>
                    <Route path={"*"}>      // 위와 일치하는 모든 페이지가 없다면, [모든 url을 받는 * 라우트로 들어간다.]
                        <NotFound />        // 그러면, NotFound 페이지가 렌더된다.
                    </Route>
                </Switch>
            </div>
        );
    }

    export default App;