如何在浏览器刷新后加载react页面?

1mrurvl1  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(315)

每当我输入url时http://domain.de/beta/ 在我的浏览器中,我可以看到verein的内容。如果我按f5刷新页面,就会出现404未找到错误。
我正在使用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>
46scxncf

46scxncf1#

当您刷新应用程序时,会出现404 not found错误,因为您的应用程序转到服务器查找/verein页面,但没有。react路由器只是客户端路由,但第一个请求总是发送到服务器。
您需要设置服务器以捕获所有传入url(/*)并呈现index.html
有关更详细的答案,您可以阅读以下问题和答案:
质量保证

相关问题