React Routing 在本地机器上工作，但在 Heroku 上不工作

Question

React/react router/heroku 问题在这里（它可能是 heroku 失败的地方）。

我正在关注这个精彩的教程： https ://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d#.y77yjte2j 一切正常到我发布的地步它到 heroku，我尝试导航到 https://appname.herokuapp.com/about ，我收到 404 Not Found/nginx 错误。当然，根据教程，它应该显示一个关于页面。

底线： React router 在 heroku 上不工作，我不明白为什么。

我已经尝试按照以下建议修改我的 server/app.js 文件： React routes are not working in facebook’s create-react-app build

 // server/app.js
const express = require('express');
const morgan = require('morgan');
const path = require('path');

const app = express();

console.log('hi from /src/server.js')
// Setup logger
app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] :response-time ms'));

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

// Always return the main index.html, so react-router render the route in the client

app.get('/about', (req, res) => {

  console.log('hi from app.get.about')
  console.log(req)
  console.log(res)
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});
app.get('/*', (req, res) => {

  console.log('hi from app.get')
  console.log(req)
  console.log(res)
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

module.exports = app;

但它不起作用，也不会在控制台中记录任何内容：

 2017-01-20T21:03:47.438140+00:00 heroku[web.1]: Starting process with command `bin/boot`
2017-01-20T21:03:49.540005+00:00 app[web.1]: Injecting runtime env into /app/build/static/js/main.242e967b.js (from .profile.d/inject_react_app_env.sh)
2017-01-20T21:03:49.695317+00:00 app[web.1]: Starting log redirection...
2017-01-20T21:03:49.695899+00:00 app[web.1]: Starting nginx...
2017-01-20T21:03:51.108255+00:00 heroku[web.1]: State changed from starting to up
2017-01-20T21:04:22.720627+00:00 heroku[router]: at=info method=GET path="/" host=sentieoapp1.herokuapp.com request_id=fb8bc13b-f6b5-47bc-8330-443f28e211df fwd="132.147.73.97" dyno=web.1 connect=0ms service=3ms status=200 bytes=627
2017-01-20T21:04:22.746761+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:22 +0000] "GET / HTTP/1.1" 200 386 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:23.076521+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:23 +0000] "GET /static/js/main.242e967b.js HTTP/1.1" 200 62263 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:23.056416+00:00 heroku[router]: at=info method=GET path="/static/js/main.242e967b.js" host=sentieoapp1.herokuapp.com request_id=436d5ce5-ee39-4ab7-9e12-f5871e0fd552 fwd="132.147.73.97" dyno=web.1 connect=0ms service=25ms status=200 bytes=62540
2017-01-20T21:04:23.745285+00:00 heroku[router]: at=info method=GET path="/static/css/main.9a0fe4f1.css" host=sentieoapp1.herokuapp.com request_id=80438aaa-58c4-456e-8df9-7a29e49bc4ba fwd="132.147.73.97" dyno=web.1 connect=0ms service=2ms status=200 bytes=560
2017-01-20T21:04:23.766676+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:23 +0000] "GET /static/css/main.9a0fe4f1.css HTTP/1.1" 200 301 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:24.044940+00:00 heroku[router]: at=info method=GET path="/static/media/logo.5d5d9eef.svg" host=sentieoapp1.herokuapp.com request_id=bcbc1906-3b90-4f13-a700-f432f79c725d fwd="132.147.73.97" dyno=web.1 connect=0ms service=1ms status=200 bytes=2902
2017-01-20T21:04:24.065013+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:24 +0000] "GET /static/media/logo.5d5d9eef.svg HTTP/1.1" 200 2671 "https://sentieoapp1.herokuapp.com/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"
2017-01-20T21:04:26.264631+00:00 heroku[router]: at=info method=GET path="/about" host=sentieoapp1.herokuapp.com request_id=0caef324-9268-4ebb-a3f5-0fb047100893 fwd="132.147.73.97" dyno=web.1 connect=0ms service=4ms status=404 bytes=403
2017-01-20T21:04:26.284717+00:00 app[web.1]: 10.158.165.5 - - [20/Jan/2017:21:04:26 +0000] "GET /about HTTP/1.1" 404 191 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.95 Safari/537.36"

这就是我被困的地方。我熟悉 Express 并且之前已经让它在 heroku 上工作，但这是一个完全不同的噩梦。我知道这不是服务器端路由，而是从单个 index.html 页面中进行路由反应。但是，如果我可以让它在我的本地机器上运行，为什么它不能在 Heroku 上运行？

原文由 swyx 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实际上，在搜索 react-router 和 heroku 文档 3 个小时之前，我首先遇到了这篇文章。对于 swyx 和任何其他有同样问题的人，我将概述您需要做的最少的事情才能使它正常工作。

router.js -（显然将 AppSplash 和 AppDemo 更改为您的组件）

 export default <Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={AppSplash}/>
    <Route path="demo" component={AppDemo}/>
  </Route>
</Router>

应用程序.js

 import React, { Component } from 'react'

class App extends Component {
static propTypes = {
  children: PropTypes.node
}

render() {
  const { children } = this.props
  return (
    <div>
      {children}
    </div>
  )
}
}

export default App

在主目录的根目录中创建一个新文件并将其命名为 static.json 。把这个放进去。

 {
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

再次推送到 heroku。这次路线应该有效。

解释：

您需要修改 Heroku 的默认 webpack，否则服务会混淆如何处理客户端路由。本质上是 static.json 的作用。剩下的只是根据“react-router”文档处理路由的正确方法。

原文由 HarshMarshmallow 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如何修复客户端路由错误（Heroku 404 错误）：

反应浏览器路由器

如果您正在使用 React Browser Router ，作为带有 create-react-app 的 npm 模块，那么解决方案（对我有用）是创建一个 static.json 文件（在与 package.json 相同的目录中） --- ）。

 {
  "root": "build/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

这就是此解决方案有效的原因：

Create-react-app 大部分是服务于客户端 React 的 Node.Js 服务器。 public 静态目录映射到 / 端点，从浏览器访问这个端点将下载 index.html 网页。该网页依次加载 React 组件。因为 React Browser Router 是一个 React 组件，所以在访问 / 端点后动态加载路由。换句话说，在加载 index.html 网页之前，我们所有的 React Browser Router 路由将在 Heroku 上导致 404 错误。要解决此问题，可以使用 static.json 文件将具有以下模式的任何端点映射 /** 到 index.html 将加载 React 文件，浏览器路由器并正确加载该路由的反应组件。

从 Apache HTTP 服务器：

Likewise, on an Apache HTTP server creating an .htaccess file in the public directory, will remap all endpoints that match /** to the index.html 文件。

 Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

更多资源

另请阅读 create-react-app README 的“部署”部分，其中包含大量有关如何重新配置服务器以使用客户端路由的有用信息。

https://facebook.github.io/create-react-app/docs/deployment

反应静态路由器

最后， React Router 提供了一个静态路由器， React Static Router ，它可以与 Node.js 服务器上的“react-dom/server” npm 模块一起使用，以在服务器端呈现 JSX ，并且不需要 static.json 或 .htaccess 重新配置。

原文由 tim-montague 发布，翻译遵循 CC BY-SA 4.0 许可协议