reagieren Router + Express mit Webpack

Question

Ich arbeite an einem Blog. Ich habe einen Express-Server, der verschiedene APIs wie/api/getpost,/api/newpost usw. hat.

Ich habe meine reagierenden Komponenten und ich benutze reagiere Router 4, meine Routen sind/addpost/home usw. usw.

In meinem server.js diente ich meine statische Dateien (bundel.js)

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

dann

app.get('*', function(res,req){ 
    res.sendFile(path.resolve(__dirname, 'index.html')); 
}); 

localhost:3000/ Lasten Startseite richtig localhost:3000/home lädt auch
localhost:3000/api/getpost schlägt fehl!

i Lösung hierfür könnte nicht nach

EDIT der Suche mehrere Stunden finden: Ich bin mehr Details hinzufügen!

import { BrowserRouter as Router, Route,Redirect} from 'react-router-dom'; 
<Router> 
<div> 
    <Route exact path="/" component ={App}> 
    <Route path="/home" component ={Home}> 
</div> 
</Router> 

und meine server.js Datei

var express = require('express'); 
 
var mongoose = require('mongoose'); 
 
    var router = require('./router'); 
 
var User = require('./app/components/data'); 
 
var path = require('path'); 
 

 

 
const app = express(); 
 

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

 
app.get('*', function(res,req){ 
 
    res.sendFile(path.resolve(__dirname ,'/dist/index.html')); 
 
}); 
 

 
app.use('/api',router); 
 

 
router.route('/getpost').get(function(req, res) { 
 
    User.find(function(err,user) { 
 
    if (err) 
 
    res.send(err); 
 
    res.json(user); 
 
}); 
 
}); 
 

 
    
 

 
    
 

 

 

Fehler, die ich in meiner app bekam: Fehler: Netzwerk-Fehler-Stack-Trace: createError @ localhost: 3000/bundle.js: 9088 : 15 handleError @ localhost: 3000/bundle.js: 8935: 14

Answer 1

Versuchen Sie, Ihre api-Route über Ihre app.get(*, ... Route zu verschieben. Diese Route erfasst jede Anfrage. Wenn Sie also localhost:3000/api/getpost drücken, versucht der react-Router, die Komponente zu laden, die mit /api/getpost übereinstimmt, und schlägt fehl, da Sie ihn nicht definiert haben und nicht definieren möchten.

Answer 2

Ihre ausdrückliche Datei sollte richtig bestellt werden: -

Hier ist, was Sie

var express = require('express'); 
var mongoose = require('mongoose'); 
    var router = require('./router'); 
var User = require('./app/components/data'); 
var path = require('path'); 


const app = express(); 

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

app.use('/api',router); 

router.route('/getpost').get(function(req, res) { 
    User.find(function(err,user) { 
    if (err) 
    res.send(err); 
    res.json(user); 
}); 
}); 

app.get('*', function(res,req){ 
    res.sendFile(path.resolve(__dirname ,'/dist/index.html')); 
});