Question

使用Node / express / React with MySQL / Sequelize

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

我将在这里部署到Heroku：https://nameless-temple-93876.herokuapp.com/

在本地，后端（expressjs）和前端（React Router）路由都可以正常工作。问题：在Heroku上，虽然后端路由有效，但只有root（'/'）响应路由有效。其他路线只是给出空白页面，而不是加载相应的组件：

我尝试了很多事情，火星构建包就是其中之一，但这却给出了 nginx 错误。

我也试图像这样在客户端文件夹中手动设置static.json，但这没有帮助：

[Test]
public async Task Index_UserExists_ReturnsViewAsync()
{
     var mockUserStore = new Mock<IUserStore<ApplicationUser>>();
     var mockUserManager = new Mock<UserManager<ApplicationUser>>(mockUserStore.Object, null, null, null, null, null, null, null, null);

    var user = new ClaimsPrincipal(new ClaimsIdentity(new Claim[]
    {
        new Claim(ClaimTypes.NameIdentifier, "1"),
    }));

    mockUserManager.Setup(x => x.GetUserAsync(user));

    var controller = new ManageController(mockUserManager.Object, null, null, null, null)
    {
        ControllerContext = new ControllerContext()
        {
            HttpContext = new DefaultHttpContext() { User = user }
        }
    };

    //Act
    var result = await controller.Index();

    //Assert
    Assert.IsInstanceOf<ViewResult>(result);
}

}

这是我当前对App.js的配置：

App.js

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

在我的主要 server.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;

其他相关文件：

快速路由：https://github.com/geochanto/nutrient-calculator-react/blob/edit-recipe/routes.js
带有特定路由文件的Routes文件夹：https://github.com/geochanto/nutrient-calculator-react/tree/edit-recipe/routes
位于以下位置的应用js：https://github.com/geochanto/nutrient-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"));
  });
}

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

1 个答案: