关于node.js：使用webpack的React Router Express


react router + express with webpack

我正在写博客。我有一个具有各种API的Express服务器，例如/ api / getpost，/ api / newpost等。

我有我的React组件，我正在使用React Router 4，我的路线是/ addpost / home等。

在我的server.js中，我提供了我的静态文件(bundel.js)

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

然后

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

localhost:3000/正确加载主页
localhost:3000/home也会加载
localhost:3000/api/getpost失败！

经过几个小时的搜索后，我找不到此解决方案

编辑：
我要添加更多详细信息！

1
2
3
4
5
6
7
import { BrowserRouter as Router, Route,Redirect} from 'react-router-dom';
<Router>
 
  <Route exact path="/" component ={App}>
  <Route path="/home" component ={Home}>
 
</Router>

和我的server.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

相关讨论

尝试将您的api路由移到app.get(*, ...路由上方。该路由正在捕获每个请求，因此当您按下localhost:3000/api/getpost时，react-router会尝试加载与/api/getpost匹配的组件，但由于您没有并且不想定义它而失败。

您的快递文件应正确订购：-

这是您可以尝试的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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'));
});