现在回答
这对我来说很难完全正确。通过谷歌的指导很少。我希望这对其他人有帮助。
正如丹·科尔尼列斯库（Dan Cornilescu）指出的那样，教练们接受了第一场比赛。所以我们从更具体到不太具体。我通过遵循创建的文件夹结构解决了这个问题npm run build：
1. 处理js、css、media的子目录。
2. 处理manifest.json和fav.ico的json和ico请求。
3. 将所有其他流量路由到index.html。
handlers:
- url: /static/js/(.*)
static_files: build/static/js/\1
upload: build/static/js/(.*)
- url: /static/css/(.*)
static_files: build/static/css/\1
upload: build/static/css/(.*)
- url: /static/media/(.*)
static_files: build/static/media/\1
upload: build/static/media/(.*)
- url: /(.*\.(json|ico))$
static_files: build/\1
upload: build/.*\.(json|ico)$
- url: /
static_files: build/index.html
upload: build/index.html
- url: /.*
static_files: build/index.html
upload: build/index.html
欢迎更有效的答案。
原问题：
为react-router路由设置GAE app.yaml会产生“Unexpected token
在开发环境中，所有路由直接调用即可工作。 localhost:5000 和 localhost:5000/test 产生预期结果。
在 GAE 标准中，当直接调用 URL www.test-app.com 时，app.yaml 函数用于根目录。www.test-app.com/test 会产生 404 错误。
app.yaml #1
runtime: nodejs8
instance_class: F1
automatic_scaling:
max_instances: 1
handlers:
- url: /
static_files: build/index.html
upload: build/index.html
配置 app.yaml 以接受所有路径的通配符路由都会失败。 www.test-app.com/ 和 www.test-app.com/test 会产生错误“Unexpected token
app.yaml #2
runtime: nodejs8
instance_class: F1
automatic_scaling:
max_instances: 1
handlers:
- url: /.*
static_files: build/index.html
upload: build/index.html
重现此问题的步骤：
节点：10.15.0
npm：6.4.1
gcloud init通过谷歌云SDK
npm init react-app test-app
npm install react-router-dom
将路由器添加到index.js：
index.js
import {BrowserRouter as Router, Route} from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById('root'));
serviceWorker.unregister();
将路由添加到app.js：
app.js
import {Route} from 'react-router-dom'
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div>
<Route exact path="/"
render={() => <div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>} />
<Route exact path="/test"
render={() => <div className="App">
Hello, World!
</div>} />
</div>
);
}
}
export default App;
package.json 没有变化：
package.json
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
npm run build
gcloud app deploy
我们如何说服应用程序引擎允许 React SPA 直接处理路由？
