从NodeJS服务React构建时刷新问题

Question

问题描述：

• 开发了一个使用浏览器路由器进行路由的React应用程序。
• 使用yarn build
创建了一个版本
• 编写了一个简单的NodeJS服务器，该服务器为我的react-build/index.html提供了路由'/'
• 如果我不刷新应用程序，则效果很好。

现在，当我在http://website.com/category刷新页面时，它会显示Cannot GET /category

我了解这里的问题。当我在NodeJS服务器中写一条路由/时，它无法识别website.com/category。但是我的React应用程序具有所有路由。

NodeJS代码

server.get("/", (req, res) => {
  res.sendFile (__dirname + '/react-build/index.html') ;
}

反应路由代码

<Switch>
  <Route exact path='/' component={Home} />
  <Route path='/cat' component={CategoryPage} />
  <Route path='/quickview/:id' component={QuickView} />
  <Route path='/brand/:brand' component={ProductDetailsPage} />
  <Route path='/product' component={ProductDetailsPage} />
  <Route path='/login' component={LoginPage} />
  <Route path='/myaccount' component={AccountPage} />
</Switch>

刷新问题是针对除根之外的所有路由的

我希望我的应用程序能够重新加载。希望通过我目前的实现解决这个问题。如果实际上没有其他方法，请提出一些替代解决方案。谢谢

Answer 1

我解决了这个问题。当我只为'/'编写服务器路由时，我的服务器只是了解网站根目录。我更改了'/'-> '/*'，现在一切正常。我希望这个答案可以节省别人的时间。

Answer 2

如果您从 NodeJS 服务器构建您的 React 应用程序，那么您应该将其视为 UI 的单独路由，而不是使用“/”，以便您可以在所有路由中添加前缀，即“/UI”

如果您尝试使用上面建议的“/*”，您的 API 将开始崩溃。