【React】URLのハッシュ#を削除する #React

React Routerパッケージのルーティングを実装するコンポーネントはいくつかあるが、そのうちBrowserRouterとHashRouterはサーバー側の処理かクライアント側の処理かの違いで、HashRouterの場合、サーバー側の設定は不要だが、ではサーバー側でルーティングの設定をする必要がある。

<BrowserRouter>
HTML5のhistoryAPIを使用してルーティングを処理します。
サーバーサイドの設定が必要です。特に、設定されたすべてのパスに対して正しいページを表示する必要があります。これにより、サーバー側とクライアント側のルーティングが一致します。
URLにはハッシュ（#）が含まれず、クリーンなURLが表示されます。例えば、example.com/homeのような形式です。
<HashRouter>
URL内のハッシュ（#）を使用してルーティングを処理します。
サーバーサイドの設定は不要です。URLのハッシュはクライアント側で処理されます。
URLにはハッシュ（#）が含まれ、その後にルーティング情報が続きます。例えば、example.com/#/homeのような形式です。

通常は<BrowserRouter>を使用することが一般的ですが、サーバーサイドの設定が困難な場合や、ブラウザのサポートに制限がある場合には<HashRouter>を使用することができます。

BrowserRouterを使用するためのApacheの設定

/etc/httpd/conf/httpd.confの/var/www/htmlのAllowOverride Allにして、.htaccessファイルの設定を有効にする。

<Directory "/var/www/html">
    Options Indexes FollowSymLinks
    #AllowOverride None 
    AllowOverride All
    Require all granted
</Directory>

<VirtualHost *:80>
    <Directory "/var/www/html">
        AllowOverRide All
        Options Indexes FollowSymLinks
        Require all granted
    </Directory>
</VirtualHost>

/var/www/html/.htaccessを作成し、下記を書き込む

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

index.htmlの

に下記を追記する。はHTMLの要素内に配置されるタグであり、基本となるURL（ベースURL）を指定するためのものです。意味は、要素はドキュメント内の相対URLの解決に使用されるベースURLは、ルートディレクトリを指定する。 ※まぁなんか基準を変えることで、URLのルーティングを解決しているってことかな？

<head>
 <base href="/" /> //ここ
</head>

【React】URLのハッシュ#を削除する

BrowserRouterを使用するためのApacheの設定

参考文献