inflearn logo
강의

Course

Instructor

Practical-focused! React for FE Beginners

라우터 궁금사항

Resolved

32

alwayz0121

4 asked

0

image.png

이미지에서 첫 번째 라우터는 잘 나오는데 두 번째 라우터부터 빈 페이지가 나와요

그래서 타고타고 가보니 usestep이 console.log(step)을 찍어보니 id:0 step:0만 계속 출력이 되더라구요

근데 SurveyPage에 Questionbox 안에 있는 ActionsButton안에 usestep을 잘 들어가있는데

왜 빈 페이지가 나오는지 모르겠어요

react redux node.js sass swr

Answer 1

0

communityai8509

안녕하세요, 인프런 AI 인턴입니다.

alwayz0121님, React Router를 사용한 라우팅에서 두 번째 라우터부터 빈 페이지가 발생하는 문제를 겪고 계시는군요. 이와 같은 문제는 여러 원인으로 인해 발생할 수 있지만, 주로 라우터의 경로 설정이나 상태 관리 부분(Check useStep)에서 문제가 발생할 수 있습니다. 여기 몇 가지 점검해볼 사항을 안내드리겠습니다:

  1. 라우터 경로 확인: "/surveys/:Id:step" 경로 설정에서 ":"가 두 번 사용되는 부분을 확인해주세요. 일반적으로 URL 파라미터 값은 "/surveys/:Id/:step"과 같은 형식으로 설정되어야 합니다.

  2. 상태 초기화 값 확인: useStep 후크를 사용하고 있다고 하셨는데, 초기화 값이 잘못 설정되어 있을 수 있습니다. console.log(step)에서 id:0 step:0만 계속 출력된다고 하셨으니, 초기 상태가 올바르게 설정되었는지 다시 확인해 보세요.

  3. 컴포넌트 문제 확인: 빈 페이지가 출력되었다는 것은 컴포넌트가 정상적으로 렌더링되지 않았을 수 있음을 의미합니다. SurveyPage 컴포넌트 및 그 내부의 ActionsButton 에서 useStep 후크가 올바르게 동작하도록 설정되어 있는지 확인해야 합니다. 필요한 의존성들이 올바르게 전달되고 사용되고 있는지 점검해 주세요.

아래 이미지를 참고해 컴포넌트 이름 설정이나 후크 사용 방식에 오류가 없는지 확인해보세요. 추가적인 로그나 디버깅을 통해 더 명확한 원인을 발견하실 수 있을 것입니다.

Routing Example

문제가 계속 된다면 더 많은 코드 예시나 설명을 제공해 주시면 추가적으로 도와드리겠습니다. 좋은 하루 되세요!

자료 Git Source 주소 ??

0

62

1

교육자료 소스 바로 실행시..

0

76

1

교육자료 소스 바로 실행시..

0

57

1

13-1, 13-2 질문

0

120

1

12-2. Recoil -> Jotai 변환 코드 공유합니다.

4

207

1

recoil error 나시는 분들 보세요

3

124

1

어려워요 뭔소리죠 대체

3

313

1

사진이 잘 안보여요.

0

154

1

반복문 사용법은 안알려주고 주의사항만 알려주시는거군요

1

241

0

hooks recoil불러오는 과정에서 src내부에 있는 파일이 안불러와집니다

0

120

1

제발 코드샌드박스 링크 좀 달아주세요....

2

525

2

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer

0

141

0

4.2 React 렌더링 과정 에서 왜 컴포넌트가 두 번씩 호출될까요?

0

174

1

useEffect 관련 질문드립니다.

0

136

0

jotai로 변경했을 때 코드

0

426

3

리코일이 업데이트가 안된지 오래됐다고하네요

3

458

1

학습 링크

0

360

1

12-2 질문

0

657

3

5-1 학습링크

0

268

1

7-5. 메모 삭제 기능에 문제가 있습니다.

1

235

0

실습링크

0

320

1

2-6 구구단 배열 넣어서 출력시 질문

0

141

1

[2-1] 강의링크 메모용

3

915

1

[17-3. Redux로 데이터 관리]에서 Store에 슬라이스 리듀서 추가하기 질문합니다.

0

192

1