Chapter3 - 라우팅 더 꼼꼼히 쓰려면?

잘못된 주소 처리하기

 

1. 일단 NotFound.js 파일을 만들고 빈 컴포넌트를 만들어주자.

import React from "react";

const NotFound = (props) => {

  return <h1>주소가 올바르지 않아요!</h1>;

};

export default NotFound;

2. App.js에서 불러옵니다.

import NotFound from "./NotFound";

3. Switch를 추가해주고,

...

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

...

    return (

      <div className="App">

        ...

          <Switch>

            <Route

              path="/"

              exact

              render={(props) => (

                <BucketList

                  list={this.state.list}

                  history={this.props.history}

                />

              )}

            />

            <Route path="/detail" component={Detail} />

          </Switch>

        ...

      </div>

    );

4. NotFound컴포넌트를 Route에 주소 없이 연결하면 끝!

...

          <Switch>

            <Route

              path="/"

              exact

              render={(props) => (

                <BucketList

                  list={this.state.list}

                  history={this.props.history}

                />

              )}

            />

            <Route path="/detail" component={Detail} />

            <Route component={NotFound} />

          </Switch>

...

NorFound 컴포넌트를 만들어준다

App.js에서 import 해주기

Route에서 제공하는 Switch import하기

Switch 적용하기

Switch는 버킷리스트의 Route들만 감싸주도록 하기(나중에 다른거 적용하는중에 Title까지 적용하는 건줄알고 진행했다가 계속 오류나서 1시간 헤맸다..ㅠ)

원래 path를 지정해주지 않으면 모든 페이지에서 다 떠야하는데 Switch를 사용하여 맨마지막에 지정해줌으로써 주소를 잘못 입력하여 들어오면 NotFound가 나오도록 설정한다.

 

 

 

뒤로가기 버튼 달아보기

import React from "react"; import { useHistory } from "react-router-dom"; const NotFound = (props) => {   const history = useHistory();   return (     <>       <h1>주소가 올바르지 않아요!</h1>       <button         onClick={() => {           history.goBack();         }}       >         뒤로가기       </button>     </>   ); }; export default NotFound;

useHistory를 import해주고, 뒤로가기 버튼을 만든뒤 onClick에 history.goBack();을 사용해서 버튼을 누르면 이전 페이지로 돌아가도록 설정해준다!