인프런 커뮤니티 질문&답변

졍졍

작성한 질문수

Slack 클론 코딩[실시간 채팅 with React]

라우터 주소 설계(라우트 파라미터)

useParams undefined 문제

작성

1.5K

useParams로 workspace 파라미터를 가져오려고 했는데 undefined가 떠서 SWR로 get 요청 시 undefined가 들어가 오류가 나는 상황입니다.

const Workspace: VFC = () => {
  const { workspace } = useParams<{
    workspace: string;
  }>();
  console.log(workspace, 'workspace');

<Switch>
  <Route
    path="/workspace/:workspace/channel/:channel"
    component={Channel}
  />
  <Route
    path="/workspace/:workspace/dm/:id"
    component={DirectMessage}
  />
 </Switch>

workspace 컴포넌트 내부에서 라우팅할 때 주소값도 잘 설정했고 실제로 주소에도 잘 나오는데
useParams에서 왜 파라미터 값을 가져오지 못할까요?

babel typescript Socket.io react 웹팩 클론코딩

퀴즈

재사용성, 가독성 향상, 복잡성 관리를 위해 UI 요소를 분리하여 컴포넌트로 만드는 주된 이유는 무엇일까요?

각 컴포넌트의 스타일을 다르게 적용하기 위해

디버깅 시 오류 추적을 쉽게 하기 위해

불필요한 props 전달을 피하기 위해

코드 재사용성을 높이고 관리 복잡성을 줄이기 위해

답변 1

제로초(조현영)

지식공유자

저 부분 말고 layourt/App.tsx에도 라우트 worksapce/:workspace 적혀있나요?

졍졍

질문자

    <Switch>
      <Redirect exact path="/" to="/login" />
      <Route path="/login" component={Login} />
      <Route path="/signup" component={Signup} />
      <Route path="/workspace/:workspace" component={Workspace} />
    </Switch>

App.tsx에는 적혀있지 않았습니다! 수정한 결과 잘 작동합니다 감사합니다 🙇‍♀️

졍졍

작성한 질문수

전체 Q&A

질문하기