Question

我的Heroku应用程序将React与React Router一起使用。我使用Switch浏览不同的组件，因此URL也随之更改（例如/room/4141）。但是，如果我重新加载页面，它的行为就不像它是一个React应用程序，而是搜索提到的.html文件。

我使用了这个Buildpack：https://github.com/mars/create-react-app-buildpack.git，但是对于将页面重写为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'));
  })

Answer 1

通过JSON文件构建的can be configured包：

您可以通过在应用程序的根文件夹中写入static.json来为静态应用程序配置不同的选项。

sample routing configurations中的一个看起来完全符合您的要求：

在提供单页应用程序时，支持提供index.html文件的通配符URL很有用，同时还能继续正确提供JS和CSS文件。路线排序可让您同时进行以下操作：
{
  "routes": {
    "/assets/*": "/assets/",
    "/**": "index.html"
  }
}

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

1 个答案: