생활코딩! react DOM 수정사항

내가 생각한 react-router-dom 이란, URL에 맞는 컴포넌트를 렌더링하기 위한 관리를 도와주는 도구인 것 같다. 아직 본문은 읽어보지 못했지만 react 18버전으로 업데이트 되어서 책에 나오는 예제가 작동하지 않았다.

import {BrowerRouter, Route} from 'react-router-dom' 
ReactDOM.render(<BrowerRouter><App/></BrowerRouter>,
                document.getElementById('root'));

을 작성했는데 뜬금 없이 지금까지 예시에서 잘 사용해왔던 ReactDOM은 더이상 사용할 수 없다고 나왔다. 따라서 https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis을 참조하여 코드를 다음과 같이 수정하였다.

const container = document.getElementById('root');
const root = createRoot(container); 
// createRoot(container!) if you use TypeScript
root.render(<BrowerRouter><App /></BrowerRouter>);

그런데 또 다른 문제가 생겼는데,

A <Route> is only ever to be used as the child of <Routes> element, 
never rendered directly. Please wrap your <Route> in a <Routes>

Routes로 또 감싸야 하는데 왜 그래야 하는지 모르겠다. 기존 예제는 감싸지 않아도 잘 작동하는데... 여튼 감싸주고 나니

s not a <Route> component. All component children of <Routes> must be a 
<Route> or <React.Fragment>

다음과 같은 에러가 또 발생했다. Routes 안에는 Route만 갖을 수 있다는데, 다른 블로그를 참고하니 element 속성값으로 이용해서 작성되어 있어 따라 작성해보니 문제가 해결되었다. 감사합니다.

[수정 전]
 <Routes>
   <Route path ="/"><Home /></Route>
   <Route path = "/topics"><Topics /></Route>
   <Route path = "/contact"><Contact /></Route>
</Routes> 

[수정 후]
 <Routes>
   <Route path ="/" element ={<Home />}></Route>
   <Route path = "/topics" element ={<Topics />}></Route>
   <Route path = "/contact" element = {<Contact />}></Route>
</Routes> 

일단 작성해두고 다른 예제가 또 안될 때 참고해보자.

Routes로 감싸는 이유는 Switch 역할을 하기 위해서인가? 
Switch는 일치하는 컴포넌트를 발견되면 첫 번째로 발견된 컴포넌트만 출력이 된다. 
예제에서는 Route<exact ..>를사용하여 원하는 내용을 출력을 했는데. 위와 같이 
Routes를 작성하면 Switch와 exact 속성을 작성하지 않아도 일치하는 컴포넌트 이외의 
나머지 컴포넌트 내용은 출력하지 않는다.