react-router issue with ReactJS, Webpack on Raspberry Pi with Nginx

Question

Deployment of my ReactJS website to Raspberry Pi does not produce intended results. Below are five files playing integral role to the site, then explanation of problem is further described.

Nginx has a section of code:

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;

The above WORKS.

1) When I try to add to App.jsx the following:

import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router';
<Link to=""></Link> or even <Link />

The entire website disappears. Why?

2) Let's assume #1 was not implemented (no <Link /> ). The following changes are made:

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'))

The entire website disappears. Why?

What is going on in case #1, and case #2?

Answer 1

If you get some 404 errors in your console that probably means it is related to react-router browserHistory. (How do you deploy your script to RaspberryPI?)

Maybe enabling the historyfallback option in webpack could work;

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

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

Or you should set a publicPath;

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

Answer 2

It was a routing hyperlink issue all along. Due to Nginx giving the ReactJS website an extension (ie www.foo.com/reactjs/), the extension needs to be reflected hereby within the code.

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

instead of

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