Question

我正在通过使用Hapi构建的服务器来服务我的react应用程序包，它具有两个连接，一个用于api，另一个用于服务包和静态资产，React应用具有通过react-router的内部路由。

我可以通过配置的主机和端口访问应用程序，并且在通过DOM进行交互时，它的行为正常，在我使用应用程序html链接时，资产被提供并且导航重定向到正确的组件。但是，在浏览器的URL输入中输入/ dashboard之类的URL会导致404，它可能会寻找资产而不是与应用内的正确路线匹配。

如何覆盖此行为，以便在应用程序中同时提供资产和功能路由？

在使用webpack开发服务器或内置在开发服务器中的包裹时，路由可以正确地与浏览器URL配合使用，所以我想我的服务器配置或路由中缺少某些内容

这是服务器代码：

const Hapi = require('hapi'),
  Path = require('path'),
  Inert = require('inert'),
  HJWT = require('hapi-auth-jwt2'),
  Bell = require('bell'),
  Good = require('good'),
  GC = require('good-console'),
  Blipp = require('blipp'),
  APIRoutes = require('./routes/api'),
  Config = require('./config'),
  User = require('./model/user').User,
  Db = require('./db'),
  server = new Hapi.Server()

server.connection({
  host: Config.server.host,
  port: Config.server.port,
  labels: ['api'],
  routes: {
    cors: true,
    log: true
  }
})

server.connection({
  host: Config.server.host,
  port: Config.server.port - 1,
  labels: ['app'],
  routes: {
    cors: true,
    log: true
  }
})

const apiServer = server.select('api')
const appServer = server.select('app')

server.register(
  [
    {
      register: Good,
      options: {
        reporters: [
          {
            reporter: GC,
            events: {
              request: '*',
              log: '*',
              response: '*',
              error: '*'
            }
          }
        ]
      }
    },
    Blipp,
    Inert,
    HJWT,
    Bell
  ],
  { select: ['api'] },
  pluginError => {
    if (pluginError) {
      console.error('Failed to load a plugin:', pluginError)
    }

//Auth config ...   

    apiServer.route(APIRoutes.endpoints)
    appServer.route([

      {
        method: 'GET',
        path: '/{param*}',
        handler: {
          directory: {
            path: './client/dist/'
          }
        },
        config: {
          description: 'Serve client application dir',
          auth: false
        }
      }
    ])
  }
)

server.start(() => {
  console.log('Server running at:', apiServer.info.uri)
})

process.on('SIGINT', function() {
  console.log('stopping hapi server')

  server.stop({ timeout: 10000 }).then(function(err) {
    console.log('hapi server stopped')
    process.exit(err ? 1 : 0)
  })
})

预先感谢

最大

提供webapp生产捆绑包，路由冲突

0 个答案: