如何在 heroku 上启用 gatsbyjs client-only 路由

Question

我有一个带有仅客户端路由的 gatsbyjs 应用程序，它在本地运行良好，但在生产中我只能在遵循 link 时访问这些路由，但是当直接在浏览器中输入 url 时，我得到一个 404.

我原以为会遵循 this thread 中的答案，但问题仍然存在。有什么提示或建议吗？

// app.json
{
    "name": "User Resource",
    "repository": "https://github.com/guanacone/fullstack_app",
    "stack": "container",
    "buildpacks": [
        {
            "url": "heroku/nodejs"
        },
        {
            "url": "https://github.com/heroku/heroku-buildpack-static"
        }
    ]
}

//static.json
{
    "root": "public/",
    "clean_urls": true,
    "routes": {
        "/user/**": "user/index.html"
    }
}

// gatsby-config.js
module.exports = {
  /* Your site config here */
  plugins: [
    'gatsby-plugin-layout',
    {
      resolve: 'gatsby-plugin-create-client-paths',
      options: { prefixes: ['/user/*'] },
    },
    'gatsby-plugin-styled-components',
    'gatsby-plugin-use-query-params',
  ],
};

// src/pages/user.js
import React from 'react';
import { Router } from '@reach/router';
import UserIndex from '../components/UserIndex';
import UserProfile from '../components/UserProfile';
import UserNew from '../components/UserNew';
import UserEdit from '../components/UserEdit';
import UserActivation from '../components/UserActivation';

const User = () => (
  <Router basepath='/user'>
    <UserIndex path='/' />
    <UserProfile path='/:id' />
    <UserNew path='/new' />
    <UserEdit path='/:id/edit' />
    <UserActivation path='/activation' />
  </Router>
);

export default User;

Answer 1

我通过删除 heroku-buildpack-static 并将以下代码添加到我的 express.js 服务器解决了这个问题。

app.get('/user/**', (req, res) => {
  res.sendFile(path.join(`${__dirname}/public/user/index.html`));
});

如何在 heroku 上启用 gatsbyjs client-only 路由

How enable gatsbyjs client-only routes on heroku

client

routes

heroku

gatsby