反应路由器在刷新时给出错误“错误：ENOENT：没有这样的文件或目录，stat'在错误（本机）”答案

【问题标题】：React Router giving error "Error: ENOENT: no such file or directory, stat ' at Error (native)" on refresh反应路由器在刷新时给出错误“错误：ENOENT：没有这样的文件或目录，stat'在错误（本机）”
【发布时间】：2017-02-25 04:25:29
【问题描述】：

我正在使用 React 路由器做一个 React 项目并且一直遇到问题。当我尝试刷新时，我收到此错误“错误：ENOENT：没有这样的文件或目录，stat '/Users/LonnieMcGill/Desktop/ProjectFolder/React_Projects /public/index.html' at Error (native)"

我不明白为什么这是我的文件：

server.js

const express = require('express')
const path = require('path')
const port = process.env.PORT || 3000
const app = module.exports = express();

app.use(express.static(__dirname + './../public'));

app.get('*', function(req, res) {
res.sendFile('index.html', { root: '../public' });
})

 app.listen(port, function(){
 console.log("Successfully listening on : 3000")
 });

webpack.config.js

module.exports = {
entry: {
    main: './public/app/PortfolioApp.jsx'
},

devServer: {
 inline: true
},

output: {
    filename: 'bundle.js',
    path: './public/scripts'
},
devtool: 'sourcemap',
module: {
    loaders: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel'
        },
        {
            test: /\.s?css$/,
            exclude: /node_modules/,
            loaders: ["style", "css", "sass"]
        }
    ]
  }
};

PortfolioApp.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'
import { Router, Route, browserHistory, Link, hashHistory } from    'react-router';

 import PortfolioHomePage from './component/HomePage.jsx';
 import About from './component/about/About.jsx';

class PortfolioApp extends React.Component{
constructor(){
    super()
 }

 render() {
   return (
     <Router history={browserHistory}>
       <Route path="/" component={PortfolioHomePage} />
        <Route path="/about" component={About} />
     </Router>
     )
    }
   }

    ReactDOM.render(<PortfolioApp />, document.getElementById('app'));

我的文件结构如下：

【问题讨论】：

标签： node.js reactjs webpack webpack-dev-server

【解决方案1】：

我将我的服务器固定为如下所示：

server.js

const cors = require('cors');
const express = require('express')
const config = require('./config.js');

const app = module.exports = express();

app.use(express.static(__dirname + './../public'));

app.get('*', function(req, res) {
res.sendFile('index.html', { root: './public'});
})

app.listen(config.port, function() { console.log('Server initiated on     port', config.port); })

并添加了一个config.js文件：

module.exports = {
  port: 3000,
  corsOptions: {
    origin: 'http://localhost:' + this.port
  }
}

webpack.config.js

module.exports = {
entry: {
    main: './public/app/PortfolioApp.jsx'
},

devServer: {
 inline: true
},

output: {
    filename: 'bundle.js',
    path: './public/scripts'
},
devtool: 'sourcemap',
module: {
    loaders: [
        {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            loader: 'babel'
        },
        {
            test: /\.s?css$/,
            exclude: /node_modules/,
            loaders: ["style", "css", "sass"]
        }
    ]
  }
};

PortfolioApp.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { render } from 'react-dom'
import { Router, Route, browserHistory, Link} from    'react-router';

 import PortfolioHomePage from './component/HomePage.jsx';
 import About from './component/about/About.jsx';

class PortfolioApp extends React.Component{
constructor(){
    super()
 }

 render() {
   return (
     <Router history={browserHistory}>
       <Route path="/" component={PortfolioHomePage} />
        <Route path="/about" component={About} />
     </Router>
     )
    }
   }

    ReactDOM.render(<PortfolioApp />, document.getElementById('app'));

我的文件结构如下：

【讨论】：