Vite + React.js with React-router-dom会在页面加载时出现404错误

Question

这是我的Package.json

{
"name": "man_power",
"version": "0.1.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^35.4.0",
"@ckeditor/ckeditor5-react": "^5.0.5",
"@material-ui/core": "^4.12.4",
"@tailwindcss/forms": "^0.5.2",
"chart.js": "^3.8.0",
"chartjs-adapter-moment": "^1.0.0",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-flatpickr": "^3.10.13",
"react-icons": "^4.7.1",
"react-loading-skeleton": "^3.1.0",
"react-router-dom": "^6.3.0",
"react-select": "^5.7.0",
"react-select-country-list": "^2.2.3",
"react-transition-group": "^4.4.2",
"validator": "^13.7.0",
"sweetalert": "^2.1.2"
},
"devDependencies": {
"@vitejs/plugin-react": "^2.0.0",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.6",
"vite": "^3.0.0"
}
}

这是我的vite.config.js:

import { defineConfig } from "vite";
import postcss from "./postcss.config.js";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
define: {
"process.env": process.env,
},
css: {
postcss,
},
plugins: [react()],
resolve: {
alias: [
{
find: /^~.+/,
replacement: (val) => {
return val.replace(/^~/, "");
},
},
],
},
build: {
commonjsOptions: {
transformMixedEsModules: true,
},
},
server: {
host: true,
},
});

我使用

npm run build

它输出dist文件夹，其中包含:输入图片描述

我试图用react-router-dom导航到不同的页面，但当我刷新*domainName/dashboard *时，我在服务器上得到404错误。

查看:

https://manpower1.xpertsgroup.net/

Answer 1

同样的问题把我带到了这个页面。因此，对于任何可能遵循的人，原因(事后看来很明显)解释如下:https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing

引用:

如果你使用的路由器使用HTML5 pushState历史APIhood(例如，React Router with browserHistory)，许多静态文件服务器将会失败。例如，如果你在React Router中使用了一个路由对于/todos/42，开发服务器将响应localhost:3000/todos/42正确，但是Express服务于生产环境

这是因为当有一个新的页面加载到/todos/42时服务器查找build/todos/42文件，但没有找到。的服务器需要配置为响应到/todos/42的请求index . html。例如，我们可以修改Express示例上面为index.html提供未知路径:[…]

在我的情况下(Apache服务器)，我通过添加以下.htaccess文件到我的根文件夹来解决它:

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

但其他情况的解决方案在链接下面讨论。

请注意，您可能必须通过您的主机提供商配置您的服务器以允许"重写引擎"。在我的例子中，选项是"mod_rewrite"(设置为"on")。

Answer 2

我也有同样的问题，最后用这个方法解决了:

解决方案:(nginx web服务器)
修改你的nginx配置文件，并添加以下行:

location / {
...
try_files $uri.html $uri $uri/ /index.html;
...
}

解释:
当你使用Vite构建产品时，dist文件夹中只有一个index.html文件。这不是React和React-router-dom的错，因为它们对服务器端一无所知!他们只能在客户端理解和操作。

你需要做的是找到服务器的配置文件手动重定向所有路由到根目录index。html

在我的情况下，我有一个nginx服务器运行，我需要直接修改nginx.conf(位于/etc/nginx/nginx.conf)。但是主机服务不允许我对服务器文件做任何修改。最后，我发现这些服务可以让你修改一些重要的文件，比如这个。在你的/public文件夹中必须有一个名为something_nginx .conf的文件(在构建过程之后将与你的index.html一起)，该文件将被它们拾取并覆盖服务器上的nginx.conf。

检查您的托管服务提供商文档以查看确切的文件名和内容。然后，进行我在解决方案中提到的微小更改。

例如，我的nginx文件名是liara_nginx.conf，内容如下:

error_page 404 /404.html;
location / {
index  index.html index.htm;
try_files $uri.html $uri $uri/ /index.html;
}
location ~ /.well-known {
allow all;
}

Answer 3

我尝试了一些东西，特别是我问了一些人在Discord React flux。我通过在公共文件夹中创建.htaccess文件解决了这个问题。

包含以下代码:

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

他还说，如果这不起作用，试试下面的代码:

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

他的解释如下:

你得到404的原因是因为主机服务器只知道index.html。如果你在其他路由上重新加载，react应用就不会被加载因此，在大多数主机上，你必须遵循这种方法来确保任何404路由被重定向到index.html，从而允许react路由器进行控制即使是cra。如果您构建cra，那么最终要部署的是静态资产，除了托管位置之外，没有任何区别。有些设置了重定向，有些没有。

我还是需要有人给我详细解释一下。