带有 React-Router 和 Create-React-App 的 Heroku

Question

这个问题已被多次询问，我一直在阅读类似的问题并试图解决这个问题，但没有运气，所以我发布了我的代码，看看是否有一双新的眼睛可以帮助解决我的问题。

我的应用程序在 Heroku 上按预期工作，但是在刷新页面或直接导航到不是主页的路线时（例如 myapp.com/whatever）。 我收到 404 未找到。

我的路由在本地工作，所以我知道这与我的应用程序设置和 Heroku 有关。 我有一个带有 create-react-app 客户端和快速服务器后端的 MERN 应用程序

文件夹结构

client/
server/
package.json
static.json

静态文件

{
    "root": "client/build/",
    "clean_urls": false,
    "routes": {
        "/**": "index.html"
    }
}

路由器.js

<BrowserRouter basename="/">
    <Fragment>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route extact path="/login" component={Login} />
            <PrivateRoute path="/dashboard" component={Dashboard} />
        </Switch>
    </Fragment>
</BrowserRouter>

服务器.js

if (process.env.NODE_ENV === 'production') {
    app.use(express.static('client/build'))

    app.get('*', (req, res) => {
        res.sendFile(path.resolve(__dirname, '../client', 'build', 'index.html'));
    });
}

有人看到我遗漏的东西吗？

Answer 1

我也花了很多时间在这个问题上。 如果我没记错的话，您必须在 package.json 文件中创建一个名为“主页”的新属性。 您可以将它放在 package.json 中对象的最后一个内部。 该属性的值将是您托管应用程序的 URL。 所以我的例子是：

{
  "name": "react_movie_db_course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-fontawesome": "^1.6.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
   "homepage" : "http://www.weibenfalk.com/react_rmdb/"
}

如果您不是从子文件夹开始，也不要认为您需要组件的基本名称。

甚至可能您还必须在服务器上编辑 .htaccess 文件。 这就是我的 .htaccess 文件的样子。

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Fallback all other routes to index.html
RewriteRule ^ /react_rmdb/index.html [L]

我也知道路由开始在服务器上正常工作可能需要 24 小时。

Answer 2

heroku 中有一个特定的 buildpack 用于 create-react-app 为我解决了这个问题：

heroku buildpacks:set mars/create-react-app

static.json 文件：

{
    "root": "client/build/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }