리액트에서 라우팅 처리 - 잘못된 주소 처리

 

잘못된 주소 처리

- 웹페이지 개발자가 미리 정하지 않은 주소로 들어온 경우를 다루는법

 

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로 Route를 감싸준다.

      <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/cat/:cat_name" component={Cat} />
          <Route path="/dog" component={Dog} />

        </Switch>

 

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

      <Switch>
          <Route path="/" exact component={Home} />
          <Route path="/cat/:cat_name" component={Cat} />
          <Route path="/dog" component={Dog} />
        
          <Route component={NotFound}/>
        </Switch>

 

5. 편의성을 위한 NotFound에 뒤로가기 버튼 생성

- NotFound 에서는 이미 history가 자동으로 넘어와진다.

- 하지만 일부러 넘기려면 아래처럼 코딩한다.

 <Route render={(props) => ( <NotFound history={this.props.history}/>)}/>

 

6. NotFound.js에 버튼생성 및 onclick 연결

import React from "react";

const NotFound = (props) => {
    console.log(props);
    return (
        <div>
        <h1>주소가 올바르지 않아요!</h1>
        <button onClick={() => {props.history.goBack();}}>뒤로가기</button>
        </div>
    );
};

export default NotFound;