javascript - 重新加载时无法获取错误 404？

Question

我的 React 路由器在开发环境下运行良好，这就是我在 webpack 开发服务器中所做的:

historyApiFallback: {  
  index: 'index.html',
}

所以在生产模式下我想做同样的事情，我在 Express 中这样做了，如下所示:

const indexPath = path.join(__dirname, '../public/index.html')
const publicPath = express.static(path.join(__dirname, '../public'))

  app.use('/public', publicPath)
  app.use('/graphql', graphQLHTTP(async (req) => {
    let { user } = await getUser(req.headers.authorization); 
    if(!user) {
      user = 'guest'
    }
    return { 
      schema, 
      pretty: true,
      graphiql: true,
      context: {
        user,
      }
    }
  })); 

app.get('/', function (_, res) { res.sendFile(indexPath) });

我没有对react-router-dom进行任何更改，所以我假设错误出现在我的快速配置中。那么生产模式下的historyApiFallback相当于什么？下面是我的 webpack 捆绑配置:

output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js',
    publicPath: '/public/'
  },

在我的 html 中，我像这样引用该包:

<script type="text/javascript" src="/public/bundle.js"></script>

我认为配置正确，但是当我重新加载时，出现无法获取错误 404？

Answer 1

您应该将此行添加到您的应用程序中:

app.get('*', function (_, res) { res.sendFile(indexPath) });

或者你应该更好地使用这个包:https://github.com/bripkens/connect-history-api-fallback

您应该阅读有关历史模式的更多信息:

为了摆脱哈希，我们可以使用路由器的历史模式，它利用history.pushState API来实现URL导航，而无需重新加载页面:

使用历史记录模式时，URL 将看起来“正常”，例如http://oursite.com/user/id 。美丽!

但是，这里出现了一个问题:由于我们的应用程序是单页客户端应用程序，如果没有正确的服务器配置，用户如果访问 http://oursite.com/user/id 就会收到 404 错误。直接在他们的浏览器中。现在这很丑。

不用担心:要解决此问题，您所需要做的就是向您的服务器添加一个简单的全能回退路由。如果 URL 与任何静态资源都不匹配，它应该提供与您的应用程序所在的相同的 index.html 页面。再次美丽!