TIL) (React) Router: Switch

사용자가 미리 정하지 않은 주소로 들어온 경우, Not Found 페이지로 보내주기

 

1. NotFound.js 파일 만들고 빈 컴포넌트 만들기

import React from "react";

const NotFound = (props) => {
  return <h1>주소가 올바르지 않아요!</h1>;
};

export default NotFound;

2. App.js 에서 import 해 줌

import NotFound from "./NotFound";

3. Switch를 추가해주고, 4. NotFound컴포넌트를 Route에 주소 없이 연결하면 끝!

...
import

{Route, Switch}
from

"react-router-dom";
...

return (
    < div className="App" >
    ...
    < Switch >
      < Route path="/" exact >
        < BucketList list={list} / >
      < / Route >
      < Route path="/detail" exact >
        < Detail / >
      < / Route >
      < Route >
        < NotFound / >
      < / Route >
    < / Switch >
                ...
                < / div >
);

...