在服务器上重新加载时，React 路由器 404 子路由问题

问题描述 投票：0回答：2

我正在使用react和react-router来构建一个网站。我在 Godaddy 的共享 cPanel 主机上托管了该网站。这是一个带有 Apache 服务器的 linux。

该应用程序在自然链接路由上运行良好，但当我在服务器上重新加载页面时，它给出了 404 未找到。虽然我了解问题并在 

.htaccess
文件中进行了更改以在每个请求上重定向到 
index.html
，但这仅适用于顶级路由。

示例：这适用于重新加载时的 

www.mysite.com/about
和 
www.mysite.com/users
。但这对于重新加载时像
www.mysite.com/users/john
这样的子路线不起作用。

这是我在

.htaccess
文件上的配置

Options -MultiViews
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

我不知道 

.htaccess
文件内容的作用是什么或如何起作用，这是我从其他 Stack Overflow 答案中获取的配置。我不明白如何更改此配置以支持子路由。

下面是我在子路线上重新加载时控制台上的错误

Uncaught SyntaxError: Unexpected token '<' (at bundle.js:1:1)

非常感谢对此的任何帮助！

PS：这在本地 webpack 开发服务器上运行良好，并将 

historyApiFallback
值设置为 
true

版本：

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
reactjs apache .htaccess react-router react-router-dom
2个回答
1
投票

确保index.html 的头部有

<base href="/" />

0
投票

如果你正在使用 React。

如果添加后问题仍然存在 在 public/index.html 中

所以第一个删除

这里有 2 个解决方案：

1> 将“BrowserRouter”替换为“HashRouter”。 （只是你会发现你的基本路线中添加了一个额外的“#”）

2> 在公共目录中更新或创建 404.html 文件：例如

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
  
    <title>Your Title</title>
    <script type="text/javascript">
      var segmentCount = 1;
      var l = window.location;
      l.replace(l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') );
    </script>
  </head>
  <body>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.