如何将 react-router 与 express 路由器一起使用？答案

【问题标题】：How to use react-router with express router?如何将 react-router 与 express 路由器一起使用？
【发布时间】：2018-07-28 06:07:37
【问题描述】：

我有带有 client 和 server 文件夹的项目

客户端：我有 react redux react-router 应用，端口：localhost:3000

服务器： 我有 express.Router() 的快递服务器我的应用程序与客户端的 webpack 捆绑在一起，并且此应用程序可在 '/' port: localhost:3001

上使用

当我在 CLIENT(port:3000) 文件夹中启动 webpack-dev-server 时，每条路由都按我的意愿工作，然后我使用 nodemon SERVER(port:3001) 启动 express 服务器 并面临这个问题：

我面临的问题是当我遵循 SERVER(port:3001) 上的任何路线时，除了 '/' 我收到 Express 的 404 错误。所以谁能解释我如何一起使用 react-router 和 express，所以我所有来自捆绑应用程序的路由都可以在开发时在 webpack-dev-server 中工作

例如我们有 2 条路线：

  <Route exact path="/" component={Home} />
  <Route path="/test" component={Test} />

我们有带有 express 应用的 server.js：

 app.get('*', (req,res) => 
 res.sendFile(path.join(__dirname+'/public/index.html')))

当我收到 'localhost:3001/' 时，快递发送 index.html 然后我得到 'localhost:3001/test' 和 Express throw Error 404

【问题讨论】：

How do I redirect into react-router from express?的可能重复
react 路由器对服务器端发生的事情一无所知。您必须通过一些 RESTful 调用（通常通过 API 或服务）向服务器显式发送 http 请求。然后您可以将数据从后端提供给前端
@BoyWithSilverWings 它唯一的重定向我在问如何将 express.Router() 与 react-router 一起使用
`当我在`上遵循任何路线时，你能解释一下这是什么意思吗？
@Panther 已编辑

标签： reactjs express react-router react-redux react-router-v4

【解决方案1】：

将此添加到您的 Nginx 应用配置中：

location /{
...
try_files $uri %uri/ /index.html
}

【讨论】：