Heroku 与 React-Router 和 Create-React-App答案

【问题标题】：Heroku with React-Router and Create-React-AppHeroku 与 React-Router 和 Create-React-App
【发布时间】：2018-11-25 15:59:10
【问题描述】：

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

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

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

文件夹结构

client/
server/
package.json
static.json

static.json

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

Router.js

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

Server.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'));
    });
}

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

【问题讨论】：

标签： reactjs heroku react-router-v4 react-router-dom

【解决方案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 小时。

【讨论】：

嗯，目前似乎没有为我解决问题.. 不过感谢您的回复，超级令人沮丧的问题
改为编辑我的原始分析器，以便我可以正确格式化代码 =)
Jason McFarlane 解决过这个问题吗？

【解决方案2】：

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

heroku buildpacks:set mars/create-react-app

static.json 文件：

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

【讨论】：