私のReactJSウェブサイトをRaspberry Piに配備しても、意図した結果が得られません。以下は、サイトに不可欠な役割を果たす5つのファイルです。次に、問題の説明をさらに説明します。ReactJSの反応ルータの問題、NginxのRaspberry PiのWebpack
nginxのは、コードのセクションがあります
upstream reactjs {
server 127.0.0.1:3010;
}
location /reactjs/ {
#try_files $uri $uri/ /index.html;
rewrite ^/reactjs/?(.*)$ /$1 break;
proxy_pass http://reactjs;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $host;
#proxy_set_header X-Forwarded-Server $host;
#proxy_set_header Upgrade $http_upgrade;
#proxy_set_header Connection "upgrade";
#proxy_http_version 1.1;
}
package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "React First Tutorial",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^2.8.1",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.16.1"
}
}
webpack.config.js
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3010
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
main.jsを
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
)
}
}
export default App;
上記WORKS。
1)私はApp.jsxに以下を追加しよう:
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
<Link to=""></Link> or even <Link />
Webサイト全体が消えました。どうして?
2)#1が実装されていないとしましょう(<Link />
)。次の変更が行われます。
main.js
全体のウェブサイトが消えimport React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
import App from './App.jsx';
ReactDOM.render((
<Router history = {browserHistory}>
<Route path = "/" component = {App}>
<IndexRoute component = {App} />
<Route path = "home" component = {App} />
</Route>
</Router>
), document.getElementById('app'))
を。どうして?
ケース#1、ケース#2では何が起こっていますか?
あなたが任意のエラーのコンソールで見ていましたか? – Li357
コンソールにエラーはありません。それは奉仕を構築するようです。 – Jeremy