ajax - React Server 端 TypeError : Router. use() 需要中间件函数但得到一个字符串

Question

我正在尝试让我的服务器准备好接收 ajax 调用。我正在尝试了解有关 React 的更多信息，并且我一直在尝试弄清楚服务器端。 大多数语法是我从我看过的不同教程中提取的。 server.js 确实与 postgres 数据库连接。但是一旦我尝试引入路线，应用程序就会崩溃。在 server.js 中，有一行我试图为读者突出显示。我用*********包围它。那是我试图引入路线(./routes/songs.js)的时候。

这是一个 React 应用程序。数据库是带有sequelize的postgres

我错过了什么并且做错了什么？

错误

throw new TypeError('Router.use() requires middleware function but got a ' + gettype(fn));
  ^

TypeError: Router.use() requires middleware function but got a string
    at Function.use (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/node_modules/express/lib/router/index.js:458:13)
    at EventEmitter.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/node_modules/express/lib/application.js:219:21)
    at Array.forEach (native)
    at EventEmitter.use (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/node_modules/express/lib/application.js:216:7)
    at Object.<anonymous> (/Users/Kainoa/DevLeague/kanakaHacks_Software/KanakaMusicR/KMR/server.js:33:6)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)

server.js

require('babel-register')
const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const match = ReactRouter.match
const RouterContext = ReactRouter.RouterContext
const ReactRedux = require('react-redux')
const Provider = ReactRedux.Provider
const Store = require('./js/Store.jsx')
const store = Store.store
const _ = require('lodash')
const fs = require('fs')
const port = 5050
const baseTemplate = fs.readFileSync('./index.html')
const template = _.template(baseTemplate)
const ClientApp = require('./js/ClientApp.jsx')
const Routes = ClientApp.Routes

const app = express()
const db = require('./models')

app.use('/public', express.static('./public'))


app.all('/*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type')
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE')
  next()
})

 *************app.use('/', './routes/song.js')*******************

app.use((req, res) => {
  match({ routes: Routes(), location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      const body = ReactDOMServer.renderToString(
        React.createElement(Provider, {store},
          React.createElement(RouterContext, renderProps)
        )
      )
      console.log(body)
      res.status(200).send(template({ body }))
    } else {
      res.status(404).send('Not found')
    }
  })
})

var server = app.listen(port, function () {
  db.sequelize.sync()
  console.log('server listening on port ' + server.address())
})

song.js(路由)

'use strict';

const express = require('express')
const router = express.Router();
const bodyParser = require('body-parser')
const db = require('./../models')
const Song = db.Song;


router.use(bodyParser.json({ extended : false }));

router.get('/',function(req, res){
  console.log('made it to this Call')
});

module.exports = router

Answer 1

我认为问题是这个 app.use('/', './routes/song.js') 而不是它应该是 app.use('/', require ('./routes/song.js')); app.use 需要一个函数作为第二个参数，但在这里它得到一个字符串。

Server.js

require('babel-register')
const express = require('express')
const React = require('react')
const ReactDOMServer = require('react-dom/server')
const ReactRouter = require('react-router')
const match = ReactRouter.match
const RouterContext = ReactRouter.RouterContext
const ReactRedux = require('react-redux')
const Provider = ReactRedux.Provider
const Store = require('./js/Store.jsx')
const store = Store.store
const _ = require('lodash')
const fs = require('fs')
const port = 5050
const baseTemplate = fs.readFileSync('./index.html')
const template = _.template(baseTemplate)
const ClientApp = require('./js/ClientApp.jsx')
const Routes = ClientApp.Routes

const app = express()
const db = require('./models')

app.use('/public', express.static('./public'))


app.all('/*', function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type')
  res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE')
  next()
})

 app.use('/', './routes/song.js'));

app.use((req, res) => {
  match({ routes: Routes(), location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
      const body = ReactDOMServer.renderToString(
        React.createElement(Provider, {store},
          React.createElement(RouterContext, renderProps)
        )
      )
      console.log(body)
      res.status(200).send(template({ body }))
    } else {
      res.status(404).send('Not found')
    }
  })
})