时间戳

首页 > 解决方案 > 浏览器刷新后如何加载反应页面？

javascript - 浏览器刷新后如何加载反应页面？

问题描述

每当我在浏览器中输入 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>

标签： javascriptreactjsreact-router-dom

解决方案

当你刷新你的应用程序时，你会得到一个 404 Not-Found 错误，因为你的应用程序去服务器找到 /verein 页面，但没有。React 路由器只是客户端路由，但第一个请求将始终是服务器。

您需要设置您的服务器以捕获所有传入的 url (/*) 并呈现您的 index.html

有关更详细的答案，您可以阅读此问题接受的答案：

质量保证

推荐阅读