與webpack反應路由器+快遞

Question

我正在寫博客。 我有一個具有各種API的Express服務器，例如/ api / getpost，/ api / newpost等。

我有我的反應組件，我正在使用反應路由器4，我的路線是/ addpost / home等。

在我的server.js中，我提供了我的靜態文件（bundel.js）

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

然后

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

localhost:3000/正確加載主頁localhost:3000/home也會加載
localhost:3000/api/getpost失敗！

經過幾個小時的搜索，我找不到解決方案

編輯：我要添加更多詳細信息！

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

和我的server.js文件

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

我在應用程序中遇到的錯誤：錯誤：網絡錯誤堆棧跟蹤：createError @ localhost：3000 / bundle.js：9088：15 handleError @ localhost：3000 / bundle.js：8935：14

Answer 1

嘗試將api路由app.get(*, ...路由之上。該路由會捕獲每個請求，因此當您命中localhost:3000/api/getpost ，react-router會嘗試加載與/api/getpost匹配的組件/api/getpost並失敗，因為您還沒有也不想定義它。

Answer 2

您的快遞文件應正確訂購：-

這是您可以嘗試的

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