https://thebook.io/080203/0442/
리액트를 다루는 기술 13장
App.js
기존 코드
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/profiles" element={<Profiles />} />
</Routes>
이렇게 작성하면 다음과 같은 경고를 보게된다.
react-router-dom v6에서 하위경로에 여러 라우팅을 하기 위해서는 url뒤에 *를 적어주어야 한다.
경로설정부터 다시해보자.
<Route path="/profiles" element={<Profiles />} />에서
<Route path="/profiles/*" element={<Profiles />} />로 변경한다.
두번째 해결해야하는 것은 profiles이다.
profiles에 들어가고 사용자를 클릭하면 해당 프로필 화면이 나와야한다.
경로가 없다고나온다. 이유는 .App.js에서 route설정을 해주지 않았기 때문이다
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/profiles" element={<Profiles />} />
<Route path="/profiles/:username" element={<Profile/>}/>
</Routes>실행은 되었다.
의문점은 서브라우트에서 다음과 같은 경로설정을 하는 것은 적합하지 않은 것 같다.
react-router-dom v6 서브 라우트
Profiles.js
<Routes>
<Route
path="/profiles"
exact
render={() => <div>사용자를 선택해주세요</div>}
/>
<Route path="/profiles/:username" element={<Profile />} />
</Routes>여기서 route에 대한 path경로가 잘못된 것이었다. 부모 경로는 필요가 없다.
파라미터만 적어주면 되는 것이었다.
<Routes>
<Route
path="/*"
exact
render={() => <div>사용자를 선택해주세요</div>}
/>
<Route path=":username" element={<Profile />} />
</Routes>이렇게 작성하면 올바르게 profile을 보여줄 수 있다.
