Как мне переписать все URL в index.html в Heroku?

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?

** EDIT: Я не достаточно знаком с экспрессом, но вот как подается 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

Этот buildpack можно настроить через файл JSON:

Вы можете настроить различные параметры для статического приложения, написав static.json в корневой папке приложения.

Одна из примеров конфигураций маршрутизации выглядит так, как будто она делает именно то, что вам нужно:

При обслуживании одностраничного приложения полезно поддерживать подстановочные URL-адреса, которые служат для файла index.html, и в то же время продолжать корректно обслуживать файлы JS и CSS. Маршрут заказа позволяет сделать оба:

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