React 애플리케이션에서 깔끔한 URL을 위한 HashRouter에서 # 제거하기

HashRouter에서 # 제거하기

React 애플리케이션에서 라우팅을 위해 react-router-dom을 사용하고 있나요? 그렇다면 HashRouter를 사용할 때 URL에 ‘#’ 기호가 포함되어 있는 것을 마주친 적이 있을 것입니다. 이 기호는 URL 경로에 기본적으로 추가되며, 추적 목적이나 더 깔끔한 URL 생성에는 원하는 결과가 아닐 수 있습니다.

HashRouter vs. BrowserRouter 이해하기

먼저, react-router-dom에서 제공하는 HashRouter와 BrowserRouter의 차이점을 이해해 봅시다. HashRouter는 URL에 해시 기호(‘#’)를 사용하여 서버 요청시 이후의 URL 경로 내용이 무시되도록 합니다. 이는 서버가 ‘# 이전의 URL 응답을 반환하고, ‘# 이후의 경로가 클라이언트 측 React 애플리케이션에서 처리됨을 의미합니다. 반면, BrowserRouter는 URL에 # 기호를 사용하지 않으며 더 깔끔한 URL을 가능하게 합니다. 그러나 BrowserRouter는 페이지 링크 또는 새로고침시 문제를 일으킬 수 있으며, 이는 서버가 해당 클라이언트 측 라우트를 정의하고 있어야 하는지에 따라 달라집니다. React 앱에 명시적인 라우트가 있지만 서버에는 없을 경우 404 not found 오류가 발생할 수 있습니다.

해결방법: HashRouter에서 BrowserRouter로 전환하기

URL에서 ‘#’ 기호를 제거하려면 HashRouter에서 BrowserRouter로 전환할 수 있습니다. 다음은 전환하는 방법입니다:

import React from 'react';
import { createBrowserHistory } from 'history';
import { Route, Switch, BrowserRouter } from 'react-router-dom';

import Home from './Home';
import Customer from './Customer';

const hist = createBrowserHistory();

const MyRouter = () => (
  <BrowserRouter history={hist}>
    <Switch>
      <Route path="/customer" component={Customer} />
      <Route path="/" component={Home} />
    </Switch>
  </BrowserRouter>
);

export default MyRouter;

createBrowserHistory()를 사용하여 브라우저 히스토리를 생성하고 BrowserRouter에 제공함으로써 React 애플리케이션에서 BrowserRouter를 사용할 수 있습니다. 의존성 및 import 문을 업데이트하는 것을 잊지 마세요.

추가 설정

라우트가 올바르게 작동하고 URL이 404 오류를 일으키지 않도록 하려면 몇 가지 추가 설정이 필요할 수 있습니다. webpack을 사용하고 있다면, webpack.config.js 파일에 다음 구성을 추가해야 합니다:

{
  output: {
    // ...
    publicPath: '/',
    // ...
  },
  devServer: {
    // ...
    historyApiFallback: true,
    // ...
  },
}

이러한 설정은 webpack에서 BrowserRouter를 사용할 때 라우트가 올바르게 작동하도록 보장합니다.

결론

결론적으로, React 애플리케이션에서 react-router-dom을 사용하여 URL에서 ‘#’ 기호를 제거하려면 HashRouter에서 BrowserRouter로 전환할 수 있습니다. BrowserRouter를 사용하고 서버와 webpack을 올바르게 구성함으로써 ‘# 없이’ 더 깔끔한 URL을 얻을 수 있습니다. import 문과 의존성을 업데이트하고 webpack을 위해 필요한 추가 설정을 수행하세요.

이 문서가 HashRouter에서 ‘#’를 제거하는 방법을 이해하는 데 도움이 되었으며, BrowserRouter로 전환하기 위한 필요한 단계를 제공해 드렸기를 바랍니다. 깨끗한 URL은 사용자 경험을 향상시키고 추적 및 SEO 최적화를 더욱 쉽게 만드는 장점이 있습니다. 즐거운 코딩하세요!

참고 자료 :

https://stackoverflow.com/questions/49240231/removing-from-hashrouter

같은 카테고리의 다른 글 보기 :

reactjs