1

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 サーバーにデプロイすると機能しません。

この問題にどのようにアプローチできますか?

4

1 に答える 1