Warum ist meine HTML-Wurzel leer, wenn react-Router in express lokal verwendet

Question

Ich versuche, zwei Routen im Moment arbeiten '/' und 'Login' atm nur mit der gleichen Seite. Wenn ich die Seite jedoch über Express und nicht über Webpack-dev-Server lade, erhalte ich eine leere HTML-Seite anstelle des Ladens des reaktiven Routers. Ich bin mir nicht sicher, wo ich von hier aus hingehen soll.

Ich habe Beispiele gesehen, die ich glaube für express, um direkt zu der HTML-Seite zu leiten, die ich hier tue, bekomme ich keine Fehler nur eine leere HTML, mit 'root' ID, dass es die Verbindung zu verbindet.

folder 
 
├── server.js 
 
├── index.js(for final react render) 
 
├── Src 
 
│ ├── public 
 
│ │ ├── index.js(empty html for react) 
 
│ │ 
 
│ │__ components 
 
│ │ 
 
│ │__routes 
 
│ │ |__index.js(react-routes) 
 
    | 
 
    |__index.js(gathers all components to push to index.js next directory up)

Server.js

const express = require('express'); 
const path = require('path'); 

const app = express(); 
const PORT = process.env.PORT || 3000; 


app.get('/**', (req, res) => { 
    res.sendFile(path.join(__dirname, '/src/public/index.html')); 
}); 

app.listen(PORT,() => { 
    console.log('server has started at:' + PORT); 
}); 

Package.json

{ 
    "name": "chauffeurus", 
    "version": "1.0.0", 
    "description": "new repo of previous group project similar to uber website", 
    "main": "./index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "webpack-dev-server", 
    "postinstall": "webpack -p", 
    "start": "node server.js" 
    }, 
    "keywords": [ 
    "reactjs", 
    "javascript", 
    "webpack", 
    "mongoose", 
    "mongodb" 
    ], 
    "author": "christian a.", 
    "license": "ISC", 
    "devDependencies": { 
    "webpack-dev-server": "^1.16.2" 
    }, 
    "dependencies": { 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-preset-latest": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "bcrypt-nodejs": "0.0.3", 
    "file-loader": "^1.1.5", 
    "html-webpack-plugin": "^2.26.0", 
    "mongoose": "^4.13.2", 
    "passport": "^0.4.0", 
    "react": "^15.4.1", 
    "react-bootstrap": "^0.31.5", 
    "react-dom": "^15.4.1", 
    "react-redux": "^5.0.6", 
    "react-router": "^4.2.0", 
    "react-router-dom": "^4.2.2", 
    "react-router-redux": "^4.0.8", 
    "redux": "^3.7.2", 
    "webpack": "^1.14.0" 
    } 
} 

Routen index.js

import React from 'react' 
import { Homepage } from '../index.js'; 
import { BrowserRouter, Route } from 'react-router-dom'; 

export default() => (
    <BrowserRouter> 
    <div> 
     <Route path="/" exact component={Homepage} /> 
     <Route path="/login" exact component={Homepage} /> 
    </div> 
    </BrowserRouter> 
) 

index.js außerhalb src Ordner

import React from 'react' 
import ReactDOM from 'react-dom'; 
import { Homepage } from './src/index.js'; 
import Routes from './src/index.js'; 

ReactDOM.render(<Routes />, document.getElementById('root')); 

Webpack.config.js

const path = require('path'); 
 

 
//NPM Install that "tells the plugin to add any JavaScript into the bootom of the page... 
 
// just before the closing body tag" 
 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
 
    template: './src/public/index.html', 
 
    filename: 'index.html', 
 
    inject: 'body' 
 
}) 
 

 
module.exports = { 
 
    entry: './index.js', 
 
    output: { 
 
    path: __dirname + './dist', 
 
    filename: 'bundle.js' 
 
    }, 
 
    module: { 
 
    loaders: [ 
 
     { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, 
 
     { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ }, 
 
     { test: /\.(png|jpg|gif)$/, loader: 'file-loader' } 
 
    ] 
 
    }, 
 
    plugins: [HtmlWebpackPluginConfig] 
 
}

Answer 1

Ich denke, das Problem ist es auch nötig, dass du deinem dienst dienst leistest statische Assets. Fügen Sie diese Zeile in Ihrer server.js:

// Serve static assets 
app.use(express.static(path.resolve(__dirname, '..', 'build'))); 

Sie haben den Code mit Ihren Verzeichnissen zu ersetzen, ich denke public der Ordner in Ihrem Fall ist (wo die Dateien und Bilder js gebaut befinden).