React github 頁

Question

我對 React 很陌生。 我有這個作為我的 RouteSwitch

const RouteSwitch = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/room" element={<App/>}/>
                <Route path="/topstories" element={<TopStories/>}/>
                <Route path="/GeneralUSA" element={<GeneralUSA/>}/>
                <Route path="/WorldNewspage" element={<WorldNewspage/>}/>
                <Route path="/Covid19page" element={<Covid19page/>}/>
            </Routes> 
        </BrowserRouter>
    )
}

我有以下作為我的 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './REDUX/store';
import RouteSwitch from './RouteSwitch';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <RouteSwitch/>
    </Provider>
  </React.StrictMode>,
)

我在 package.json 的主頁上正確設置了頁面。 我的 /room 頁面可以加載，但是當我點擊其他頁面時，它會顯示以下內容：

GET https://**mygithub**/topstories 404

Answer 1

BrowserRouter 使用歷史 API 將 URL 更改為真實路徑。

您需要確保您的服務器可以提供這些路徑。 React（和 ReactRouter）不能為你做這件事（因為它們運行在客戶端）。

對於 static 托管，例如 Github 頁面，我建議使用Next.js或Gatsby 。 這些框架都具有為您使用的每個 URL 生成 static HTML 頁面的功能。 這提供了性能和 SEO 優勢，即使JS 在瀏覽器中失敗也能正常工作。

具體文檔參見Static HTML Export for Next.js或How Gatsby Works with GitHub 頁面。

或者，作為一種快速而骯臟的解決方案，您可以切換到使用HashRouter 。