Reactjs 如何在Heroku中将所有URL重写为index.html？

我的Heroku应用程序正在使用React with React路由器。我使用Switch浏览不同的组件，因此URL也会发生变化（例如

/room/4141

）。但是，如果我重新加载页面，它的行为与React应用程序不同，而是搜索所提到的

.html

文件

我使用了这个Buildpack：但是它似乎对重写到

index.html

的页面没有任何作用

有没有办法防止这种行为并将所有URL重写为

index.html

**编辑： 我对express不太熟悉，但这里介绍了

index.html

的服务方式

const express = require("../../node_modules/express");
const app = express();
const server = require("http").Server(app);
const io = module.exports.io = require('../../node_modules/socket.io/lib')(server)
const path = require("path")

app.use(express.static(path.join(__dirname, '../../build')));
if(process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, '../../build')));
    console.log("DEBUG HERE", __dirname, path.join(__dirname+'../../build'));
    //
    app.get('/*', (req, res) => {
      res.sendFile(path.join(__dirname+'../../build/index.html'));
    })
  }
  //build mode
  app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname+'../../public/index.html'));
  })

通过JSON文件创建的buildpack：

通过在应用程序的根文件夹中写入

static.json

，可以为静态应用程序配置不同的选项

其中一个选项看起来完全符合您的要求：

在为单页应用程序提供服务时，支持为index.html文件提供服务的通配符URL非常有用，同时还可以继续正确地为JS和CSS文件提供服务。路线订购允许您同时执行以下两项操作：

{
  "routes": {
    "/assets/*": "/assets/",
    "/**": "index.html"
  }
}

---

是否可以将客户端路由与哈希一起使用，例如

https://yoursite.com/#room/4141

？这应该是开箱即用的。似乎使用哈希也没什么区别。我的页面根本没有加载。还是我做错了

*编辑：重新加载页面也会返回

未找到

，使用带

静态的buildpack.json

文件在这里似乎不起作用。您完全确定您正在使用该buildpack吗？您是否也在使用其他BuildPack？仅使用Node.js启动我的应用程序。以下是我在buildpack中的内容（a）你能解释一下为什么在React buildpack旁边需要

heroku/nodejs

？（b） 该屏幕截图显示的buildpack（

heroku/heroku buildpack static

）与您在问题中提到的（

mars/create react app buildpack

）不同，尽管它看起来也应该尊重静态路由配置。你的

程序文件中有什么？我对Heroku的buildpack系统不太熟悉。我试图删除heroku/nodejs，并将buildpack更改为mars的create react app buildpack。我添加了
static.json
，以及一个
Procfile
，其中包含
web:npm start
。至少这一次我的服务器没有崩溃，但刷新URL会像以前一样返回
未找到
。