<참고 사이트> React Router
export default function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/dashboard">Dashboard</Link>
</li>
</ul>
<hr />
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
);
}
<Switch>
대신<Routes>
로 변경한다
현재 버전의 react-router-dom(12/7 기준 ver 6.0.2)을 사용중이라면, 위의 코드처럼 <Switch>
를 쓰지 못한다.
공식 문서에 의하면 지난 버전이후로 <Switch>
대신 <Routes>
를 사용한다고 되어있다.
이 때 한 가지 더 변경을 해주어야 한다. 그렇지 않으면 다음과 같은 에러를 보게 된다.
<Routes>
의 자식은 무조건 <Route>
혹은 <React.Fragment>
이여야 한단다. (까다로운 것...) 즉 <Home/>
컴포넌트 같이 사용자 정의 컴포넌트를 Routes 안에 바로 작성하지 못한다.
결국 정의한 컴포넌트는 <Route>
내부의 element 요소로 작성을 해주어야 한다. (속성 역시 component={}
-> element={}
로 변경되었다고 함)
<Routes>
내부에서 단독적으로 정의한 컴포넌트는<Route>
의 element 요소로 포함시켜야 한다
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route path="/about" element={<About/>}/>
<Route path="/dashboard" element={<Dashboard/>}/>
</Routes>
마지막 <Switch>
부터 이렇게 바꾸면 정상적으로 실행되는 화면을 볼 수 있다.