提问者:小点点

使用webpack响应路由器快递


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

    

  


 

共2个答案

匿名用户

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

匿名用户

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

这是你可以尝试的

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