我能够部署Create React应用程序并使用now.sh表达后端但问题是它只得到主路由(我可以从主路由到/大约从主路由，但在页面重载/刷新时，我得到404错误(。我已经尝试了几种配置。求你了，我需要帮助。
"public": false,
"version": 2,
"builds": [
{
"src": "server/index.js",
"use": "@now/node",
"config": {
"maxLambdaSize": "20mb"
}
},
{
"src": "package.json",
"use": "@now/static-build",
"config": {
"distDir": "build"
}
}
],
"routes": [
{
"src": "/api/(.*)",
"dest": "/server/index.js"
},
{
"src": "/(.*)",
"dest": "/build/$1"
}
]
}
这听起来像是这里描述的一个问题-https://create-react-app.dev/docs/deployment/
如果您使用的路由器在后台使用HTML5 pushState history API(例如，React Router with browserHistory(，许多静态文件服务器将失败。例如，如果您将React Router与/todos/42的路由一起使用，那么开发服务器将正确地响应localhost:3000/todos/42，但为生产构建提供服务的Express将不会。这是因为当一个/todos/42有一个新的页面加载时，服务器会查找文件build/todos/42，但没有找到它。服务器需要配置为通过提供index.html来响应对/todos/42的请求。例如，我们可以修改上面的Express示例，为任何未知路径提供index.html：
app.use(express.static(path.join(__dirname, 'build')));
-app.get('/', function (req, res) {
+app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
当用户将你的应用程序安装到他们设备的主屏幕上时，默认配置将创建/index.html的快捷方式。这可能不适用于希望从/提供应用程序的客户端路由器。在public/manifest.json编辑web应用程序清单，并更改start_url以匹配所需的url方案，例如：
"start_url": ".",
当我使用蔡司404时，这很有帮助-https://itnext.io/fix-404-error-on-single-page-app-with-zeit-now-b35b8c9eb8fb-
为了解决404错误消息，我们必须确保当用户访问任何不是根URL的URL(例如www.myapp.com/something或www.myapp.com/dashboard/example(，并且他们以前从未加载过我们的网络应用程序时，他们会被重定向到根URL。一旦他们加载了根URL，就可以重定向回他们试图访问的页面，每个人都很高兴
步骤1-在项目的公用文件夹中创建另一个package.json文件-
{
"name": "myapp-spa",
"version": "1.0.0",
"scripts": {
"start": "serve --single --cache=60000"
},
"dependencies": {
"serve": "latest"
}
}
步骤2-配置404页面
现在我们的文件正在被提供，如果一个人转到非根URL，服务器将查找404.html文件来发送它们。这是我们重定向它们并将它们带到index.html页面的机会。将404.html文件放在与索引文件相同的公用文件夹中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>404 Not Found | My App</title>
</head>
<body>
<script>
(function redirect() {
if (document && document.location) {
document.location.replace(`/?redirect=${encodeURIComponent(document.location.pathname)}`);
}
}());
</script>
</body>
</html>
步骤3准备部署
现在，我们有了重定向代码，我们所要做的就是在原始myapp/package.json中添加一个部署命令(这不是我们之前创建的文件(：
{
"scripts": {
...
"deploy": "yarn run build && now ./build --name=myapp-spa",
"start": "react-scripts start",
"build": "react-scripts build",
...
}
}
Sweet，现在我们所需要做的就是调用yarn run deploy，我们的应用程序应该停止获取404错误页面
4.清理
为了回到我们最初请求的页面，例如myapp.com/something，我们需要将页面重定向到？重定向参数，我们在前面的教程中设置。为此，我们需要安装查询字符串库来解析参数。然后，您可以在路由代码加载后加载的位置将以下代码包含到应用程序中
const queryString = require('query-string');
...
const params = queryString.parse(document.location.search);
const redirect = params.redirect; // this would be "abcdefg" if the query was "?redirect=abcdefg"
if (document.location.pathname === '/' && redirect) {
document.location.assign(`${document.location.origin}/${redirect}`);
}
重要的是，在浏览器中缓存路由代码之前，不要使用上述代码重定向用户。一旦你完成了，你的应用程序应该可以正常工作。
基本上粘贴了整个东西，但一定要检查文章。显然，还有另一种可能的解决方案，可能值得一试：
{
...
"builds": [
{ "src": "build/**", "use": "@now/static" }
],
"routes": [
{
"src": "/(.*)\.(.*)",
"dest": "/build/$1.$2"
},
{
"src": "/",
"dest": "/build/index.html"
},
{
"src": "/(.*)",
"status": 301, "headers": { "Location": "/" }
}
]