ReactJSの反応ルータの問題、NginxのRaspberry PiのWebpack

Question

私のReactJSウェブサイトをRaspberry Piに配備しても、意図した結果が得られません。以下は、サイトに不可欠な役割を果たす5つのファイルです。次に、問題の説明をさらに説明します。

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では何が起こっていますか？

Answer 1

コンソールに404エラーが表示された場合は、反応ルータbrowserHistoryに関連している可能性があります。 （あなたのスクリプトをRaspberryPIにどのように展開しますか？）

webpackのhistoryfallbackオプションを有効にしても問題ありません。

https://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

https://github.com/ReactTraining/react-router/issues/676#issuecomment-160249067

それともpublicPathを設定する必要があります。

https://github.com/ReactTraining/react-router/issues/676#issuecomment-174073981

Answer 2

それはすべてに沿って、ルーティングのハイパーリンクの問題でした。 NginxはReactJSウェブサイトに拡張子（すなわち、www.foo.com/reactjs/）を与えているため、拡張子をコード内に反映させる必要があります。

<Route path = "/reactjs/" component = {App}> 

代わりの

<Route path = "/" component = {App}>