首页 文章

用webpack反应路由器快递

提问于
浏览
0

我正在写博客 . 我有一个快速服务器,有各种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

2 回答

  • 0

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

  • 0

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

    这是你可以尝试的

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

相关问题