部署到Heroku時，React Router Routes不起作用

Question

在MySQL / Sequelize中使用Node / express / React

我在這里有我的create react app app的一個分支： https : //github.com/geochanto/nutrition-calculator-react/commits/edit-recipe

我將在此處將其部署到Heroku的地方： https : //nameless-temple-93876.herokuapp.com/

在本地，后端（expressjs）和前端（React Router）路由都可以正常工作。 問題：在Heroku上，雖然后端路由有效，但只有root（'/'）反應路由有效。 其他路由僅給出空白頁面，而不是加載各個組件：

• https://nameless-temple-93876.herokuapp.com/recipes
• https://nameless-temple-93876.herokuapp.com/ingredients
• 等等

我嘗試了很多事情，火星構建包就是其中之一，但這卻給出了nginx錯誤。

我還嘗試像這樣在客戶端文件夾內手動設置static.json，但沒有幫助：

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

}

這是我當前對App.js的配置：

App.js

const App = () =>
    <Container> 
        <Router basename={process.env.PUBLIC_URL}>
            <div>
                <JumbotronComponent/>
                <NavBar />
                <Route path="/" component={Smoothie} />
                <Route exact path="/ingredients" component={Ingredients} />
                <Route exact path="/recipes" component={Recipes} />
                <Route path="/users/admin" component={Admin} />
                <Route path="/users/login" component={Login} />
                <Route path="/users/profile" component={Profile} />
                <Route path="/image" component={Imguploader} /> 
            </div>
        </Router>
    </Container>

export default App;

在我的主server.js中也有這個

// Serve static content for the app from the "public" directory in the application directory.
// if production env, use build folder for static files
if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
}

// for local env, use /client/public folder
else {
  app.use(express.static(path.join(__dirname, '/client/public')));
}

// server the client index.html file for all requests
app.get("*", function(req, res) {
  res.sendFile(path.join(__dirname, "./client/public/index.html"));
});

其他相關文件：

• 快速路由： https : //github.com/geochanto/營養-calculator -react / blob / edit -recipe / routes.js
• 具有特定路由文件的Routes文件夾： https : //github.com/geochanto/nutrition-calculator-react/tree/edit-recipe/routes
• 此處的應用js： https : //github.com/geochanto/nutrition-calculator-react/blob/edit-recipe/client/src/Mainrouter.js

Answer 1

回答我自己的問題。 也許它將幫助其他人：

我在使用/ client / public文件夾中的res.sendFile服務索引文件時遇到了一個錯誤。 相反，在生產環境中，我應該從/ client / build提供服務 ，如下所示：

if (process.env.NODE_ENV === "production") {
  app.use(express.static("client/build"));
  app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "./client/build/index.html"));
  });
}

else {
  app.use(express.static(path.join(__dirname, '/client/public')));
  app.get("/*", function(req, res) {
    res.sendFile(path.join(__dirname, "./client/public/index.html"));
  });
}