React[Router] - Switch & NotFound

01.Switch & NotFound

• 여러 Route중에 순서대로 위에서 아래로 가장 먼저 맞는 하나만 보여줍니다.
• exact를 뺄 수 있는 로직을 만들 수 있습니다.
• 위에서부터 아래로 순서대로 검사하며 내려가다가 마지막 Route 까지 path에 맞지 않으면 보여지는 페이지를 Not Found컴포넌트로 설정해서 페이지를 만들 수 있습니다.

02.예제 실습

App.js

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.js"

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/profile/:id" component={Profile} />
        <Route path="/profile" component={Profile} />
        <Route path="/about" component={About} />
        <Route path="/" exact component={Home} />
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  )
}

export default App

• Switch로 여러 Route를 감싸서 그 중 path 규칙이 일치하는 Route 단 하나만을 렌더링 시켜줍니다.
• 만약 아무것도 일치하지 않으면 Not Found 컴포넌트 페이지를 랜더링 합니다.

Home.js

export default function Home() {
  return <div>Home 페이지 입니다.</div>
}

Profile.js

export default function Profile(props) {
  console.log(props)
  const id = props.match.params.id
  console.log(id, typeof id)
  return (
    <div>
      <h2>Profile 페이지 입니다.</h2>
      {id && <p>id는 {id} 입니다.</p>}
    </div>
  )
}

About.js

import queryString from "query-string"

export default function About(props) {
  const searchParms = props.location.search
  console.log(searchParms)
  const query = queryString.parse(searchParms)
  console.log(query)
  return (
    <div>
      <h2>About 페이지 입니다.</h2>
      {query.name && <p>name 은 {query.name} 입니다.</p>}
    </div>
  )
}

NotFound.js

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

실행결과

• http://localhost:3000/profile/1
  
• http://localhost:3000/profile
  
• http://localhost:3000/about
  
• http://localhost:3000
  
• http://localhost:3000/test
  
• 마지막 test URL은 여러개의 Route path경로중에 아무것도 일치하지 않기때문에 Not Found 페이지를 보여줍니다.