URL 직접 접근 오류

문제 상황

두가지의 문제상황

1. 메인페이지 말고 방송에 들어가서 새로고침 하면 404 오류가 난다.
2. 메인페이지 말고 방송을 url로 직접 들어가면 404 오류가 난다.

해결 과정

• 분명 nginx 라우터 설정을 해준것 같은데 오류가 나서 우선 nginx default.conf 파일을 확인했다. → 그랬더니 index.html이 index.htm으로 오타가…. → 고쳐주었더니 1번문제는 해결되었다.

# htm...
try_files $uri $uri/ /index.htm;

# 제대로 변경
try_files $uri $uri/ /index.html;

• 그 후 2번 문제를 확인했는데 404는 뜨지 않지만 그냥 하얀 화면이 떴다.

  • 콘솔을 열어보니 이런 오류가 발생했다.

  index-b40efd9b.js:40 TypeError: Cannot destructure property 'id' of 'e.state' as it is null.
      at XN (index-b40efd9b.js:659:310)
      at Fc (index-b40efd9b.js:38:19548)
      at rg (index-b40efd9b.js:40:43960)
      at eg (index-b40efd9b.js:40:39724)
      at X1 (index-b40efd9b.js:40:39652)
      at Gs (index-b40efd9b.js:40:39506)
      at Iu (index-b40efd9b.js:40:35874)
      at Xm (index-b40efd9b.js:40:34825)
      at k (index-b40efd9b.js:25:1553)
      at MessagePort.He (index-b40efd9b.js:25:1918)
  

• 이게 무슨 오류인가 하고 찾아봤더니 id값과 e.state값이 존재하지 않아서 나는 오류라고 떠서 코드를 한번 살펴 보았다.

찾은 결론

• Url 바로 접근 안되는 현재 문제점

<Link to={`/${broadcast.id}`} state={{ id: broadcast.id, title: broadcast.title, nickname: broadcast.nickname, viewer: broadcast.viewer }}>

• 이렇게 클릭 시 값을 부여해서 이동해서 방송 화면에서 값을 받는 형태인데, 이걸 그냥 url로 접근해버리면 저 값들을 받을수 없어서 오류가 남.
• 그래서 방송 화면에 접근할때에 메인 화면에서 값을 전달받는게 아닌 api를 통해 바로 방송정보를 가져오는 방법으로 변경

// 기존의 코드
const { id, title, nickname, viewer }: BroadcastProps = location.state

// 변경 후
const [response, fetchApi] = useApi()

if (response.data)
    return (
		...
		<styles.Info currentTheme={theme}>
          <styles.Title>{response.data.title}</styles.Title>
          <styles.Nickname>{response.data.category}</styles.Nickname>
          <styles.Viewer>시청자 {response.data.viewer}명</styles.Viewer>
    </styles.Info>
		...
)

• 이런식으로 데이터를 state로 받는 것이 아닌 api에서 가져온 후 뿌려주는 방식으로 변경해서 해결