React의 HashRouter 구성 요소

React는 스타일리시한 UI로 현대적이고 빠른 애플리케이션을 구축할 수 있게 해주는 라이브러리입니다. 라우팅은 모든 사용자 대면 애플리케이션의 필수 기능 중 하나입니다.

React에서는 react-router 라이브러리를 사용하여 사용자가 라우팅 기능을 구현하여 앱을 탐색할 수 있도록 합니다.

React의 <HashRouter> 컴포넌트

<HashRouter>는 해시 값(window.location.hash에서 사용 가능)을 사용하여 URL 변경 사항에 따라 애플리케이션의 UI를 업데이트하는 <Router> 구성 요소의 하위 유형입니다. 구성 요소는 해시 기호를 사용하기 때문에 이름을 얻습니다. 이 기호를 따르는 모든 항목은 서버 요청에서 무시됩니다.

구성 요소를 조건부로 렌더링하기 위해 해시 값을 사용하기 때문에 <HashRouter>는 이전 및 새 브라우저를 지원합니다. <HashRouter>를 사용한 클라이언트 측 라우팅은 서버 측 라우팅에서 분리됩니다.

예를 들어 서버 요청이 www.sample.com/#/category/home인 경우 서버에서 수신한 최종 요청은 www.sample.com이 되며 서버 측 라우팅은 페이지를 렌더링합니다. www.sample.com, 해시 기호 뒤의 부분을 포함한 전체 URL이 아닙니다.

대신 <HashRouter> 구성 요소를 사용하여 해시 기호 뒤의 URL을 기반으로 UI를 변경할 수 있습니다. 이것은 클라이언트 측에서 수행됩니다.

<HashRouter>와 <BrowserRouter>를 사용해야 하는 경우에 대한 자세한 내용은 이 문서를 참조하십시오.

실제로 <HashRouter> 구성 요소를 사용하는 방법을 더 잘 이해하기 위해 다음 기본 예제를 살펴보겠습니다.

import "./styles.css";
import { HashRouter, Link } from "react-router-dom";
export default function App() {
  return (
    <HashRouter basename="/">
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Link to="/category1">hello</Link>
      </div>
    </HashRouter>
  );
}

우리는 react-router-dom 라이브러리에서 <HashRouter> 및 <Link>라는 두 가지 사용자 지정 구성 요소를 가져왔습니다. <HashRouter> 사용자 지정 구성 요소로 전체 애플리케이션을 래핑했습니다.

현재 URL에서 "/category1" 경로로 사용자를 안내하는 <Link> 구성 요소를 컨테이너에 추가했습니다.

실제로 어떻게 작동하는지 보려면 이 라이브 데모를 확인하십시오.

보시다시피 <HashRouter> 구성 요소에는 단순히 "/"로 설정된 basename 속성이 있습니다. 이러한 이유로 이 앱의 홈페이지는 https://bweuok.csb.app/#/입니다.

링크를 클릭하면 https://bweuok.csb.app/#/category1 경로로 이동합니다.