Question

我正在写博客。我有一个快速服务器，有各种API，如/ 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的组件并因为您没有而不想定义它而失败。

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

用webpack反应router + express

2 个答案: