-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
깃허브에 react-router@6 업데이트 해주신 코드 질문드립니다.
22.03.25 20:34 작성 조회수 172
0
제로초님 안녕하세요, 좋은 강의 만들어주셔서 감사합니다.
https://github.com/ZeroCho/ts-react/blob/master/react-router/GameMatcher.tsx
react-router@6버전으로 업데이트 해주신 GameMatcher.tsx의 코드를 적용하면
만든 컴포넌트들(게임들)이 렌더링되질 않습니다.
그래서 강의 내용과 비슷하게, @6버전에 맞게 useParams를 사용해
조건분기해서 각 컴포넌트를 리턴해주니 렌더링이 됩니다. (레포지토리의 기존 코드는 주석처리 했습니다)
궁금한점은
<Route path="number-baseball" element={<NumberBaseball />} />
<Route path="rock-scissors-paper" element={<RSP />} />
<Route path="lotto-generator" element={<Lotto />} />
<Route path="index" element={<div>일치하는 게임이 없습니다.</div>} />
react-router-dom의 Route 컴포넌트를 활용해서도 정상적으로 렌더링이 가능한가요?
GameMatcher.tsx와 Games.tsx의 Route path를 한참 수정해가며 시도해봤지만 렌더링이 안되네요 ㅠㅠ
감사합니다.
답변을 작성해보세요.
1
박재민
질문자2022.03.26
감사합니다. 혹시
<Route path="/game/*" element={<GameMatcher />} />
=> (GameMatcher.tsx)
<Route path="number-baseball" element={<NumberBaseball />} />
<Route path="rock-scissors-paper" element={<RSP />} />
<Route path="lotto-generator" element={<Lotto />} />
지금 상황도 nested routes의 경우로 볼 수 있는건가요?
답변해주신 덕분에 공식문서보고
dynamic :id
-style params and *
wildcards.
둘 사용법 차이를 좀더 이해하게 되었습니다
답변 1