React의 HashRouter와 BrowserRouter의 차이점은 무엇입니까?

React의 HashRouter와 BrowserRouter의 차이점은 무엇입니까?

저는 정식 문서를 읽으면 이해하기 어려운 프로그래밍을 처음입니다.

리액트 라우터 4에 대해서 여기서 읽고 있었는데

이 글에서 저자는 다음과 같이 말하고 있었다.<HashRouter> ★★★★★★★★★★★★★★★★★」<BrowserRouter>

그는 다음과 같이 말했다.

HashRouter는 기본적으로 URL 내의 해시를 사용하여 컴포넌트를 렌더링합니다.저는 한 페이지짜리 고정 웹사이트를 만들고 있었기 때문에, 이것을 사용할 필요가 있었습니다.

BrowserRouter는 HTML5 이력 API를 사용하여 컴포넌트를 렌더링합니다.이력은 pushState 및 replaceState를 통해 변경할 수 있습니다.자세한 내용은 이쪽

pushState와 replaceState를 통해 이력을 수정할 수 있으며 URL의 해시를 사용하여 컴포넌트를 렌더링할 수 있다는 것은 무슨 의미입니까?

Browser Router에 대한 첫 번째 설명은 전혀 이해가 안 되지만, Hash Router에 대한 두 번째 설명도 이해가 안 됩니다.예를 들어 왜 누군가가 컴포넌트를 렌더링하기 위해 URL의 해시(#)를 사용하는가?

BrowserRouter

History API를 사용합니다. 즉, 레거시 브라우저(IE 9 이하 및 동시대의 브라우저)에서는 사용할 수 없습니다.클라이언트 측 React 애플리케이션은 example.com/react/route과 같은 클린 루트를 유지할 수 있지만 웹 서버에서 백업해야 합니다.통상, Web 서버는 1 페이지 애플리케이션용으로 설정할 필요가 있습니다(즉, 같은 것).index.html는 /syslog/route path 또는 서버 측의 다른 루트에 대해 제공됩니다.클라이언트 측에서는window.location.pathname는 React 라우터에 의해 해석됩니다.리액트 라우터는 /react/route용으로 렌더링하도록 설정된 컴포넌트를 렌더링합니다.

서버측의 렌더링 「」, 「」가 포함되는 경우가 .index.html에는 현재 경로에 고유한 렌더링된 컴포넌트 또는 데이터가 포함될 수 있습니다.

HashRouter

URL 해시를 사용하여 지원되는 브라우저 또는 웹 서버에 제한을 두지 않습니다.서버측 라우팅은 클라이언트측 라우팅과는 무관합니다.

하위 호환성이 있는 단일 페이지응용 프로그램에서는 example.com/#/filename/route 로 사용할 수 있습니다.서버 측에서 제공되는 / 경로이므로 서버 측 렌더링으로 설정을 백업할 수 없습니다. #/react/route URL 해시를 서버 측에서 읽을 수 없습니다.클라이언트 측에서는window.location.hash는 React 라우터에 의해 해석됩니다.리액트 라우터는 다음과 같이 /react/route에 대해 렌더링하도록 설정된 컴포넌트를 렌더링합니다.BrowserRouter.

한 것은 '우리'입니다.HashRouterSPA에만 국한되지 않습니다.웹 사이트에는 레거시 또는 검색 엔진 친화적인 서버 측 라우팅이 있는 반면, React 애플리케이션은 example.com/server/side/route #/syslog/route와 같은 URL에서 상태를 유지하는 위젯일 수 있습니다.React 응용 프로그램을 포함하는 일부 페이지는 서버 측에서 /server/side/route에 대해 서비스되며 클라이언트 측에서는 이전 시나리오와 마찬가지로 /react/route에 대해 렌더링하도록 구성된 구성 요소를 렌더링합니다.

서버 측: HashRouter는 URL에서 해시 기호를 사용합니다.이 기호는 서버 요청에서 이후의 모든 URL 경로 내용이 무시됩니다(즉, "www.mywebsite.com/#/person/john"을 전송하면 서버가 "www.mywebsite.com"을 받습니다).그 결과 서버는 pre # URL 응답을 반환하고 post # 경로는 클라이언트 측 리액트응용 프로그램에 의해 처리(또는 해석)됩니다.

클라이언트 측: BrowserRouter는 URL에 # 기호를 추가하지 않지만 페이지에 링크하거나 페이지를 새로고침하려고 하면 문제가 발생합니다.명시적 경로가 클라이언트 반응 앱에 있지만 서버에는 존재하지 않는 경우 새로고침 및 링크(서버에 직접 도달하는 모든 것)는 404개의 발견되지 않은 오류를 반환합니다.

페이지를 새로 고치면 브라우저는 현재 경로를 사용하여 서버에 GET 요청을 보냅니다.# 는, GET 요구를 송신할 수 없게 하기 위해서 사용되었습니다.서버에 GET 요구를 송신하고 싶기 때문에 Browser Router를 사용합니다.서버상에서 라우터를 렌더링 하려면 , 로케이션이 필요합니다.루트가 필요합니다.이 루트는 서버에서 라우터에 렌더링할 내용을 지시하기 위해 사용됩니다.BrowserRouter는 루트를 동형적으로 렌더링할 때 사용됩니다.

다.BrowserRouter ★★★★★★★★★★★★★★★★★」HashRouter ver.에서 React Router ver.4의 되었습니다.4인조Router 말하면.BrowserRouterURL UI를 사용합니다.HTML-5 API를 사용합니다. 반,는HashRouter동기화합니다.

하나 더 추가하고 싶은 사용 사례.BrowserRouter 또는 Router를 사용하면 노드 서버에서는 정상적으로 동작합니다.클라이언트 라우팅(Preconfigured)을 이해하고 있기 때문입니다.

그러나 Apache 서버에 빌드 리액트 앱을 배포하는 동안(PHP라고 하면 GoDaddy에) 라우팅은 예상대로 작동하지 않습니다.404에 도착하기 때문에 .htaccess 파일을 설정해야 합니다.그 후, 클릭/url 마다 서버에의 송신 요구도 행해집니다.

이 경우 해시 라우팅(#)을 사용하는 것이 좋습니다.# HTML 페이지에서 HTML 콘텐츠 통과를 위해 사용하므로 서버 요청으로 이어지지 않습니다.

위의 시나리오에서는 HashRouting(# 뒤에 표시되는 모든 URL)을 사용할 수 있으며 라우팅 규칙을 SPA로 사용할 수 있습니다.

"브라우저 라우터"가 아닌 "해시 라우터"를 선택하는 주요 사용 사례 시나리오는 운영 환경입니다.예를 들어 www.example.com/Example이라는 URL이 있다고 합시다.이 경우 일부 서버는 "Example"이라는 이름으로 폴더를 검색하여 최종적으로 404를 반환하는 경향이 있습니다.이것은 단일 페이지 어플리케이션인 index.html이 있기 때문입니다.따라서 이러한 혼란을 피하기 위해 "www.example.com/ #/Example"을 사용합니다.여기서 해시 라우터가 빛을 발합니다.

리소스: https://www.techblogsnews.com/post/browser-router-vs-hash-router-in-react-js

"사용 사례"

해시 라우터:백엔드가 필요 없는 소규모 클라이언트 측 애플리케이션이 있는 경우 사용할 수 있습니다.HashRouterURL/로케이션바에서 해시를 사용하면 브라우저가 서버 요청을 하지 않기 때문입니다.

브라우저 라우터:백엔드를 지원하는 대규모 운영 지원 애플리케이션이 있는 경우<BrowserRouter>.

서적별 참조:학습 반응:Alex Banks, Eve Porcello의 React and Redux를 사용한 기능성 웹 개발

Comment Browser Router vs history.router()는 기사 https://www.techiediaries.com/react/react-router-5-4-tutorial-examples/ #React_Router_5_Routers_BrowserRouter_vs_HashRouter를 참조합니다.

"동적인 URL을 처리할 수 있는 동적 서버를 사용하는 경우 BrowserRouter 컴포넌트를 사용해야 하지만 정적 파일만 제공하는 서버를 사용하는 경우에는 HashRouter 컴포넌트를 사용해야 합니다."

HashRouter 이력 제한

이전에 https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md의 HashRouter 기사 상단에 있는 메모를 잘못 해석했습니다.

이 기술은 레거시 브라우저만 지원하는 것이므로 대신 BrowserHistory와 함께 작동하도록 서버를 설정하는 것이 좋습니다.

일반적으로 HashRouter를 사용하는 것은 권장되지 않지만 작성자는 로케이션에 대한 지원이 필요한 경우에만 HashRouter를 권장하지 않습니다.키 또는 location.state.

기본적으로 BrowserRouter를 사용하는 경우 "SoAndSoReactPage/:id"와 같은 URL을 사용할 수 있습니다.

예:

with a Route <Route path="soAndSoReactPage/:id"><soAndSoReactComponent/></Route>

이제 반응 컴포넌트 "SoAndSoReactComponent"에서 useParams를 사용하여 "id"를 추출할 수 있으므로 ID에 따라 "SoAndSoReactComponent" 페이지를 표시할 수 있습니다.

HashedRouter는 그런 일을 할 수 없어요.

언급URL : https://stackoverflow.com/questions/51974369/what-is-the-difference-between-hashrouter-and-browserrouter-in-react