개정판> 24장) <Route path="/@:username">

[bigtiger]

똑같이 작성했고 자료를 찾아봐도 잘안나오고 모르겠어서 질문 남깁니다.
Route path="/@:username" 에 관련된 질문입니다.

1. http://localhost:4000/@tester 접속해 봤지만 책과 같이 PostListPage 가 출력되지 않습니다.
2. 개발자도구 콘솔에 아래와같이 나타납니다.
   => No routes matched location "/@tester"
3. 깃허브에 올라가있는 코드를 복사해서 해도 되지않습니다.

어떻게 해야 해결할 수 있을까요?

[jinho]

질문자님께서 아마 질문하실때 4000번이라고 오타를 치신거 같네요. 실제 도메인은 3000번 포트로 입력하신거겠죠?

저도 같은 에러가 발생을 했는데 여러 시도를 해보니 이상하게 '/@:username' 에서 콜론이 @와 붙어있을 경우 제 역할을 하지 못하는 것 같습니다.

===@가 있는 경우===
<Route path="/@:username" element={<PostListPage />} / 인경우
도메인에 localhost:3000/@:username 이랑 똑같이 쳐야 컴포넌트가 제대로 뜹니다.
하지만 localhost:3000/@tester 혹은 localhost:3000/@username은 동작하지 않습니다

그리고
<Route path="/@">
<Route path=":username" element={<PostListPage />} />
<Route path=":username/:postId" element={<PostPage />} />
</Route>
일때는 localhost:3000/@tester와 localhost:3000/@:username모든 경우 동작하지 않습니다.

===@가 없는 경우===
<Route path="/:username" element={<PostListPage />} / 인경우에는
localhost:3000/tester 잘 작동 합니다.

===@와 콜론 분리 시===
<Route path="/@/:username" element={<PostListPage />} />인 경우에도
localhost:3000/@/tester 잘 작동합니다.

이를 보면 routing의 문제가 아닌 '/@:'에서 @와 콜론이 붙어있을 경우 콜론을 하나의 문자열로 인식을 하는 것 같습니다.
chrome, safari, xcode simulator의 아이폰 기기에서도 접속을 시도해 보았지만 결과는 같은 것으로 보아
브라우저의 문제는 아닌거 같습니다.

이런 에러가 발생하는 이유를 아시는분은 알려주시면 감사하겠습니다.

[bigtiger]

네 3000번 포트 맞아요~ 제가 잘못 적었네요
@를 제거 하고 진행했을때 username을 구분 못하는 문제가 생겨서 꼭 있어야 하는거 같은데
이 문제 해결하신분 있으시면 공유 부탁드려요~

[Minjun Kim]

#382 를 확인해주세요~
감사합니다.