在这里反应/反应路由器/ 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路由器在heroku上不起作用,我不知道为什么 。
我已经尝试server/app.js按照以下建议修改文件:React路由在facebook的create-react- app构建中不起作用
server/app.js
// 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上不能运行?
实际上,在通过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>
app.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”文档处理路由的正确方法。