javascript - React 应用程序中的路由问题

Question

我有一个网络应用程序。后端使用 Node，前端使用 React。设置(简化)如下所示:

index.js (the server)
client
package.json

客户端

现在，client文件夹包含一个前端Web应用程序，其内容与您输入create-react-app时得到的内容基本相同。

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

服务器

现在，我的主文件夹中的 index.js 充当 Node 服务器，其中我有一行类似:

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

使用这种方法，我合并了 Node 服务器和客户端前端应用程序(位于客户端文件夹内)。您可以看到我告诉服务器从 client/build 提供文件。

一切都工作正常，直到我遇到这个问题。

如果我单击客户端应用程序中的 react 按钮，该按钮会使用以下命令手动调用我的路由器:

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

它正确显示了页面。

但是如果我在 URL 地址栏中输入同一页面并按 ENTER 键，则会收到错误:

Cannot GET /listmovies

我很确定后一个错误来自 Node 服务器。因为在 index.js 中没有 listmovies 的监听器(也不应该有)。你看，基本上我认为 Node 正在拦截调用并给我一个错误。而在我之前调用 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 路由。