Switch

여러 route 중 순서대로 먼저 맞는 하나만 보여준다
exact를 뺄 수 있는 로직을 만들 수 있다
가장 마지막에 어디 path에도 맞지 않으면 보여지는 컴포넌트를 설정해서, “Not Found”페이지를 만들 수 있다

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

function App() {
  return (
    <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>
        {/* Not Found */}
        <Route component={NotFound}></Route>
      </Switch>
    </BrowserRouter>
  )
}
export default App

Path의 순서를 조정해준다
- 루트경로인 ‘/‘은 모든 경로에 포함되어 있기 때문이다
- 루트경로인 ‘/‘은 exact 여야 한다
- profile과 profile/:id 는 porfile이 겹치는 범주이기 때문에 exact를 쓰지 않고 표현할려면 순서를 조정해야 한다
NotFound 페이지는 path를 지정하지 않고 컴포넌트를 지정해준다

1
2
3

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

없는 주소일 경우 notfound 컴포넌트를 출력한다

ㅇㅇㅈ Blog

Switch 와 NotFound

Switch