Question

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

我的应用程序在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'));
    });
}

有人看到我想念的东西吗？

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 中有一个用于 create-react-app 的特定 buildpack 为我解决了这个问题：

heroku buildpacks:set mars/create-react-app

static.json 文件：

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

Heroku与React-Router和Create-React-App

2 个答案: