React呈现空白页面而不是JSON feed

时间:2018-10-31 21:44:15

标签: node.js json reactjs express serverside-rendering

我有一个在Express后端上运行的React应用;网站运作良好。

在专用URL上- herokuapp.com/apii -我想显示一个JSON数据供稿(例如like this),该供稿可用于移动应用从< / p>

这是我的 app.js (服务器):

const express = require('express'),
      path = require('path'),
      mongoose = require('mongoose'),
      bodyParser = require('body-parser'),
      passport = require('passport');

const app = express();
const apii = require('./backend/routes/apii');
...
// Serve static files from the React app -- added because of Heroku, the local app doesn't need this
app.use(express.static(path.join(__dirname, 'frontend/build')));

app.use(passport.initialize());
require('./backend/passport')(passport);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use('/apii', apii);
app.get('*', function(request, response) {
    response.sendFile(path.resolve(__dirname, './react-ui/build', 'index.html'));
});

app.listen(PORT, () => {
    console.log(`Server is running on PORT ${PORT}`);
});

module.exports = app;

然后 ./ backend / routes / apii

var express = require('express');
var router  = express.Router();

router.get('/', function(req, res, next) {
    var testObject = {
        "AppName": "MongoPop",
        "Version": 1.0
    }
    res.json(testObject);
});

module.exports = router;

这是React的路由:

export default class App extends Component {
    render() {
      return (
          <Provider store = { store }>
            <Router>
              <div>
                <Navbar />
                <Router exact path="/" component={ Home } />
                <div className="container">
                    <Route exact path="/home" component={ Home } />
                    <Route exact path="/about" component={ About } />
                </div>
              </div>
            </Router>
          </Provider>
        );
    }
}

herokuapp.com/home herokuapp.com/about 之类的路由运行良好,但是,当我尝试将浏览器放入 herokuapp.com/ apii ,我得到一个空白页,不显示JSON对象 testObject (如前所述,只有空白白页)。

但是,如果我将URL herokuapp.com/apii 放在Postman上,则会看到 testObject enter image description here

为什么浏览器未呈现JSON结构?

提前谢谢

0 个答案:

没有答案