React - switch 와 not found

- Switch  

• 여러 route 중 순서대로 먼저 맞는 하나만 보여줌
• exact를 뺄 수 있는 로직을 만들 수 있음
• 가장 마지막에 어떠한 path에도 맞지않으면 보여지는 컴포넌트를 설정해 'not found' 페이지 설정 가능

 

- app.js

 : switch 내에서 순서대로 맞는 것을 찾아감

 => exact를 써주지 않아도 순서대로 찾아가게 됨

 => switch 내에서 순서대로 적어줘야함

 

 * / -> root는 다 걸릴 수 있기 때문에 exact를 써줘야함

import './App.css';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from "./pages/Home"
import Profile from './pages/Profile';
import About from './pages/About';
import NotFound from './pages/NotFound';

function App() {
  return (
    //이 순서대로 하면 exact 사용 안해도 됨
    <BrowserRouter>
      <Switch>
        <Route path="/profile/:id" component={Profile}></Route>
        <Route path="/profile" component={Profile}></Route>
        <Route path="/about" component={About}></Route>
        <Route path="/" exact component={Home}></Route>
        <Route component={NotFound}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

- NotFound 구현  

 

 

- notfound.jsx

export default function NotFound(){
    return <div>페이지를 찾을 수 없습니다.</div>
}

 

- 맞지 않는 것들은 모두 NotFound 로 들어감