瀏覽器刷新后如何加載反應頁面？

Question

每當我在瀏覽器中輸入 URL http://domain.de/beta/ 時，我都可以看到Verein的內容。 如果我按 F5 刷新頁面，則會收到 404 Not-Found 錯誤。

我正在使用 react-router-dom 中的 BrowserRouter（v.5.2.0 > 我也檢查了 文檔，只是按照示例進行操作）。

// inside my index.js of Create-React-App
render(
  <React.StrictMode>
    <BrowserRouter basename="/beta">
      <Switch>
        <Route
          path="/verein/contact-imprint-privacy"
          component={ContactImprintPrivacy}
        />
        <Route path="/verein" component={Verein} />
        <Route exact path="/">
          <Redirect to="/verein" />
        </Route>

        <Route path="*" component={FourOhFour} />
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

我運行yarn build並將 web 應用程序從build文件夾部署到我的托管空間。 頁面刷新我錯過了什么？

11.07 更新：

我必須考慮服務器端應該如何處理 URL。 所以，我添加了一個帶有重寫規則的.htaccess文件。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /beta
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /beta/index.html [L]
</IfModule>

Answer 1

當您刷新應用程序時，您會收到 404 Not-Found 錯誤，因為您的應用程序去服務器查找 /verein 頁面，但沒有。 React 路由器只是客戶端路由，但第一個請求將始終發送到服務器。

您需要設置您的服務器以捕獲所有傳入的 url (/*) 並呈現您的 index.html

有關更詳細的答案，您可以閱讀此問題已接受的答案：

質量保證