feat(project): hash based router for github pages

scripts/deploy-github.js

@@ -77,6 +77,7 @@ function getEnv() {
   return {
     ...process.env,
     SNOWPACK_PUBLIC_BASE_URL: getBaseUrl(),
+    SNOWPACK_PUBLIC_GITHUB_PAGES: true,
   }
 }
 

src/App.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
 import { I18nextProvider, getI18n } from 'react-i18next';
 import type { Config } from 'types/Config';
 
+import Router from './components/Router/Router';
 import Root from './components/Root/Root';
 import ConfigProvider from './providers/ConfigProvider';
 import QueryProvider from './providers/QueryProvider';
@@ -11,7 +11,6 @@ import './styles/main.scss';
 import { restoreWatchHistory } from './stores/WatchHistoryStore';
 import { initializeFavorites } from './stores/FavoritesStore';
 import { initializeAccount } from './stores/AccountStore';
-import { getPublicUrl } from './utils/domHelpers';
 
 interface State {
   error: Error | null;
@@ -61,7 +60,7 @@ class App extends Component {
             onValidationError={this.configErrorHandler}
             onValidationCompleted={this.configValidationCompletedHandler}
           >
-            <Router basename={getPublicUrl('/')}>
+            <Router>
               <Root error={this.state.error} />
             </Router>
           </ConfigProvider>

src/components/Router/Router.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
+import type { BrowserRouterProps, HashRouterProps } from 'react-router-dom';
+
+export default function Router(props: BrowserRouterProps | HashRouterProps) {
+  if (import.meta.env.SNOWPACK_PUBLIC_GITHUB_PAGES) {
+    return <HashRouter {...props} />;
+  }
+  return <BrowserRouter {...props} />;
+}