我正在使用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",
确保index.html 的头部有
<base href="/" />
如果你正在使用 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>