취업/LG webOS

[webOS] React Router dom 중에서 tv에선 BrowserRouter 작동안됨

카슈밀 2022. 12. 30. 07:32
반응형

내가 처음 발견했다가, 다른 문제가 있어 안되는 것인가(앞서 포스팅한 404에러 문제 및 포트 이슈가 있어 그거인줄)

알고 시간이 없어 그냥 넘어간건데 동료직원이 해결했다.

 

우리가 기본적으로 쓰는 BrowserRouter는 tv에서 당연하게 먹히지 않는다.

왜냐하면 linux를 보통 쓰니까

그런데, 그걸 생각하지 못하고 왜 안되냐? 이러고 있었다.

 

 

아무튼 공식문서를 찾아본다는 생각은 안하고 있다가 이번 기회를 통해서 다시 공부했다.

분명 브라우저 말고 다른 것도 있을텐데하면서 예전에 한번 쓴 기억은 있는데 너무 오래되어 까먹은 듯...

 

 

+++ 추가 

에뮬레이터에서만 안되는 것 같다.

Tv로 배포하는 경우 정상작동을 확인.

사이드 이펙트가 있을 것으로 보고 hash라우터에서 탈출해서 다행인 듯

 

++02.28 추가

이전에는 enact로만 배포했는데, 순수 react로 빌드 하는 방법이 있더라.

이경우 시뮬레이터 안 먹음....뭥미...

연구가 필요하다. ㅠ

 

- 공식문서 -

https://reactrouter.com/en/6.6.1/router-components/browser-router

 

BrowserRouter v6.6.1

Type declarationdeclare function BrowserRouter( props: BrowserRouterProps ): React.ReactElement; interface BrowserRouterProps { basename?: string; children?: React.ReactNode; window?: Window; } A stores the current location in the browser's address bar usi

reactrouter.com

1.BrowserRouter

HTML5 History API 사용
주소만 바꾸고 페이지는 다시 불러오진 않는다.

2.HashRouter

옛날 브라우저 전용
주소:8080/#/game
이런식으로 주소 사이 hash(#)이 붙는다.

  • 새로고침해도 서버로 이동하지 않아서 동작이 된다.
    ->hash뒤에 부분은 client에서만 아는 부분이고 server에서는 알지 못한다.
    ->검색엔진에 뜨지 않는다 (서버가 아는 주소만 검색엔진에 뜨기 때문)

3.MemoryRouter

브라우저의 주소와 무관하다.(일체 건들이지 않음)
브라우저가 아닌 환경에서 쓰기 좋다.
테스트 환경, 임베디드 웹앱, 리액트 네이티브 등에서 사용한다.

 

- 내용 출처 -

https://velog.io/@lllen/react-router

 

[react] Router 이론

history관리가 중요 (좋은 UX제공을 할 수 있다)react-router를 활용해서 history관리를 할 수 있다.원래 a태그 누르면 history가 저장이 된다.싱글페이지기 때문에 history관리가 필요하다.뒤로가기, 앞으로

velog.io

 

728x90