使用反应应用程序中的路由问题

Question

我有一个Web应用程序。后端与节点和前端与React。设置（简体）是这样的：

index.js (the server) 
client 
package.json 

客户

现在，client文件夹包含前端Web应用程序，其内容为，当你键入创建反应的，你得到了什么基本相同-app。

Inside client有一个build文件夹，我通过在client文件夹中运行npm run build创建。

服务器

现在，index.js从我的主文件夹作为节点服务器，里面我有这样一句台词：

app.use(express.static(__dirname + "/client/build")); 

使用这种方法我已经合并我的节点服务器和客户端前端应用程序（位于客户端文件夹内）。你可以看到我告诉服务器服务于client/build的文件。

一切工作正常，直到我遇到了这个。

如果我在客户端应用程序，它使用手动说我叫路由器点击一个按钮反应：

this.props.router.push('/listmovies'); 

它正确显示页面。

但如果我输入URL地址栏相同的页面，按Enter键，我得到错误：

Cannot GET /listmovies

后者的错误，我敢肯定来自节点服务器。因为index.js中没有listmovies的收听者（并且不应该有）。你基本上看到我认为节点正在拦截呼叫并给我一个错误。而在我以前拨打router.push的情况下，我得到了一个正确的页面。

我希望我能够解释我的问题。有人可以帮助解决这个问题吗？

Answer 1

您必须使express应用程序将所有请求重定向到主文件React，以便react-router可以接管。类似于app.use下面的内容。

app.get('*', function(req, res) { 
     res.sendFile(__dirname + '/client/build/index.html') 
    }) 

这基本上处理所有通配符和它指向的index.html。请注意，如果您还在express应用上实施API路线，请将它们置于此通配符语句之上，否则它将拦截它们并将它们视为客户端react-router路由而不是服务器端API路由。