[React] url에 붙은 # 제거하기

리액트 템플릿을 이용하여 페이지 이동 중 url에 #(해시)가 붙어 있는 것을 발견했다.

 

 

리액트에서 url 에 #(해시)가 붙는 경우는 단일 페이지 애플리케이션(SPA, Single Page Application)을 이용할 경우 발견할 수 있다.

하나의 HTML 페이지 안에서 모든 기능이 동작하는 것을 SPA라고 한다. 모든 기능이 하나의 HTML 페이지 안에서 동작하기 때문에, 페이지 로딩 속도가 빠른것이 장점이라고 할 수 있다.

 

SPA 화면에서 #(해시)가 붙는 이유는 주로 웹 브라우저의 페이지 이동을 감지하고 해당 url을 분석해서 해당 페이지의 컴포넌트를 빠르게 렌더링하기 위해서이다. #(해시)가 없으면 웹 브라우저는 실제로 서버에 새로운 페이지를 요청할 수 있다.

 

본인은 템플릿 페이지를 커스텀하여 서버에 데이터를 요청한 뒤 렌더링 할 것이기 때문에 해시를 제거해야 한다.

 

---

 

1. 현재 소스

React Router에서 라우팅을 관리하게 되는데, 여기 부분을 수정하면 된다. 

아래는 App.js의 코드 예시이다.

import { HashRouter, Routes, Route } from 'react-router-dom';
import DefaultLayout from './DefaultLayout';
import {Login, Register, Page404, Page500} from './OtherPage';

function App() {
  return (
    <HashRouter>
        <Routes>
          <Route path="/login" name="Login Page" element={<Login />} />
          <Route path="/register" name="Register Page" element={<Register />} />
          <Route path="/404" name="Page 404" element={<Page404 />} />
          <Route path="/500" name="Page 500" element={<Page500 />} />
          <Route path="/" name="Home" element={<DefaultLayout />} />
        </Routes>
    </HashRouter>
  );
}

 

 

 

2. BrowserRouter 사용하기

<HashRouter> 태그 대신 <BrowserRouter>로 바꿔주자. 그러면 #(해시)가 사라진다.

만약, 다시 #(해시)가 필요하다면 <HashRouter>로 바꿔주면 url에 #(해시)가 붙는다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import DefaultLayout from './DefaultLayout';
import {Login, Register, Page404, Page500} from './OtherPage';

function App() {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/login" name="Login Page" element={<Login />} />
          <Route path="/register" name="Register Page" element={<Register />} />
          <Route path="/404" name="Page 404" element={<Page404 />} />
          <Route path="/500" name="Page 500" element={<Page500 />} />
          <Route path="/" name="Home" element={<DefaultLayout />} />
        </Routes>
    </BrowserRouter>
  );
}