잘못된 주소 처리 - NotFound (라우팅)

현재 배우고있는 버킷리스트에 잘못된 주소 처리하는 법에 대해 배워보자!

 

1. NotFound.js 를 만들어서 빈 컴포넌트를 우선 만들어주자!

import React from "react"; const NotFound = (props) => {          return            <h1>주소가 올바르지 않아요!</h1>; }; export default NotFound;

2. App.js 에 NotFound.js를 임포트 해주자.

    import NotFound from "./NotFound";

 

3. Switch 를 추가해준다. (Route로 생성된 자식컴포넌트중 매칭되는 첫번째 Route를 렌더링해준다,)

 

  - Switch 를 임포트 해준다.

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

  - Switch를 적용하기위해 Route에 감싸준다. 

<Switch> <Route     path="/"     exact     render={(props) => (         <BucketList                list={this.state.list}                history={this.props.history}           />         )}      />     <Route path="/detail" component={Detail} />     //NotFound컴포넌트를 Route에 주소 없이 연결하면 끝!     <Route component={NotFound} /> </Switch>

 

마지막으로, 주소가 올바르지않을경우 NotFound.js 의 빈 컴포넌트를 보여주게 된다.

빈컴포넌트에서 가만히 냅두게된다면 이용자 입장에서는 불편할 수 있기때문에 뒤로가기 기능을 만들어보자.

 

4. App.js에서 history를 props로 넘겨주는 게 먼저!

 

※ 먼저 history에 대해서 알고 넘어가자.

   → 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom 을 이용하여 페이지의 기록을 알수 있기때문이다.

       App.js 에서 컴포넌트의 path 와 라우팅할 컴포넌트를 정할 수 있는데, 이떄 해당 라우터는 props 로 history 객체

       를 전달받는다. 

       history 객체에 콘솔을 찍어보면은 여러가지 메소가 존재하는데, 이떄 push() 라는 메소드를 주로 많이 사용한다.

 

- App.js 에서 history를 props로 넘겨주자.

 <Route render={(props) => (

         <NotFound

              history={this.props.history}

          />

       )}/>

 

- NotFound.js 에서는

  → 뒤로가기 버튼을 만들어준다. 

      <button>뒤로가기</button>

 

→ props로 history 객체를 전달받는지 콘솔로 찍어보자!

      const NotFound = (props) => {

           console.log(props);

       ...

 

 → 마지막으로, 버튼에 onClick() 적용하기

    <button onClick={() => {props.history.goBack();}}>뒤로가기</button>