Блог

Я выполняю проект react с помощью react router и продолжаю испытывать проблемы. Когда я пытаюсь обновить, я получаю эту ошибку «Ошибка: ENOENT: нет такого файла или каталога, stat ‘/Users/LonnieMcGill /Desktop/ProjectFolder /React_Projects /public/index.html «при ошибке (родной)»

Я не могу понять, почему здесь мои файлы:

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

Моя файловая структура выглядит следующим образом:

Я исправил свой сервер, чтобы он выглядел так:

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

Моя файловая структура выглядит следующим образом: