如何在 heroku 上启用 gatsbyjs 客户端专用路由答案

【问题标题】：How enable gatsbyjs client-only routes on heroku如何在 heroku 上启用 gatsbyjs 客户端专用路由
【发布时间】：2020-12-24 22:16:52
【问题描述】：

我有一个 gatsbyjs 应用程序，它的客户端路由在本地运行良好，但在生产中我只能在点击链接时访问这些路由，但是当直接在浏览器中输入 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;

【问题讨论】：

标签： heroku routes client gatsby

【解决方案1】：

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

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

【讨论】：