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

问题描述：

我有一个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的情况下，我得到了一个正确的页面。

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

你可以添加你的'index.js'配置吗？它看起来像你缺少的东西 – QoP

@QoP这是索引文件：https://github.com/giorgim/MovieManagementApp/blob/master/index.js，不关注其他文件，就像我在我的说项目我反应，而不是像在该github项目中的香草JS。但是index.js是相同的（只是在不同的路径上）。 –

@QoP正如我在我的问题中所述，反应应用程序包含在“客户”文件夹中。它是使用create-react-app starter创建的。 –

答

您必须使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路由。