Route
중에 순서대로 위에서 아래로 가장 먼저 맞는 하나만 보여줍니다.exact
를 뺄 수 있는 로직을 만들 수 있습니다.Route
까지 path
에 맞지 않으면 보여지는 페이지를 Not Found
컴포넌트로 설정해서 페이지를 만들 수 있습니다.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
페이지를 보여줍니다.