https://georgi.karapetrov.top/にウェブサイトがあります
ソースコード: https://github.com/GeorgiKarapetrov/georgi.karapetrov.top
問題
さまざまなページへの内部リンクが機能します。トップバーの [About] ボタンをクリックすると、About ページが読み込まれます。さらに、「About」ページの URL にルーティングされます。
ただし、https://georgi.karapetrov.top/about URL を直接開くと読み込まれません。
残りについても同じことが言えます。「サブフォルダー」へのアクセスはボタンをクリックすることで機能しますが、アドレスバーに URL を入力すると「404 not found」が返されます。
残念ながら、サブフォルダーにアクセスしようとしても、NgingX エラー ログには何も表示されません。これらのサブフォルダーは実際には Web サイトのパスに存在しないため、NginX レベルでサブディレクトリの場所にルーティングできるかどうかはわかりません。
Web サイトは React アプリです。関連するコードは次のようになります。
import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
const { PUBLIC_URL } = 'https://georgi.karapetrov.top/';
const About = lazy(() => import('./pages/About'));
const App = () => (
<BrowserRouter basename={PUBLIC_URL}>
<Suspense fallback={<Main />}>
<Switch>
<Route exact path="/" component={Index} />
<Route path="/about" component={About} />
//etc
<Route component={NotFound} status={404} />
</Switch>
</Suspense>
</BrowserRouter>
);
export default App;
ローカルホストで本番ビルドを開発または提供する場合、意図したとおりに機能しnpx serve -s build
ます。NginX サーバーにデプロイすると機能しません。
この問題にどのようにアプローチできますか?