[복습]React 주요 개념정리 - 잘못된 주소 처리하기

이번에는 정의하지 않은 주소로 접속하는경우에 대해서 처리하는 방법을 복습해보자.

 

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 를 추가하자

...

render() {

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>

...

 

4. NotFound를 route에 주소 없이 연결해주면 끝

<Route component={NotFound} />

 

 

5. NotFound.js 에 뒤로가기 적용하기

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

 <Route render={(props) => (

     <NotFound

        history={this.props.history}

      />    

      )}/>

 

- NotFound.js에서는 props를 받아서 onClick에 넣어주면 끝

const NotFound = (props) => {

     console.log(props);

...

 

<button onClick={() => {props.history.goBack();}}> </button>