Switch, NotFound

Switch

여러 Route 중 순서대로 먼저 맞는 하나만 보여준다.

exact 를 뺄 수 있는 로직을 만들 수 있다.

가장 마지막에 어디 path 에도 맞지 않으면 보여지는 컴포넌트를 설정해서, Not Found 페이지를 만들 수 있다.

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






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;

작은 범주에서 큰 범주로 가게 해준다.