React Reloading Page在Server上不起作用，但适用于localhost-Java 学习之路

我一直在寻找这个问题的答案，但尚未找到解决方案 . 也许只是因为我不理解stackoverflow上给出的其他答案

我的情况：我有一个运行React Router v4的React应用程序 . 我的应用程序在http://localhost:3000/myApp下运行，并在http://myserver/myApp下生产环境

我的问题：每当我刷新本地主机上的页面时，一切正常 . 我可以毫无问题地复制粘贴网址，所有行为都很完美 . 当我在服务器上执行此操作时，出现“未找到”错误...

我的想法/我到目前为止所尝试的内容：我认为我并不完全理解客户端和服务器端路由之间的区别 . 我以为我这样做了，但不知怎的，我觉得它在localhost上工作没有意义，但在服务器上却没有 .

所以实际上我不确定问题是客户端/服务器端的问题，还是因为我的应用程序没有在根目录中运行 . localhost上的/ myApp只是通过添加 <BrowserRouter basename='/console'> 来完成这可能是个问题吗？服务器无法正确解释？由于服务器是一个apache服务器，后面有很多配置我不太懂（它是一个业务服务器，其他应用程序托管....） .

我真的认为问题是我还没有实现服务器端路由......但为什么它在我的localhost上工作？幕后的webpack开发服务器实现了吗？

如果有人能帮助我，我真的很感激 . 如果您需要更多信息，请随时问:)

非常感谢你

1 回答

你需要有一个处理浏览器历史api重定向的服务器 . 在开发模式下，webpack-dev-server将为您执行此操作，但在部署时，您需要同等配置Web服务器 .

例如，在apache中，当请求与文件不匹配时，通过 .htaccess 重定向到索引：

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html

例如，在express中，您可以使用像https://www.npmjs.com/package/express-history-api-fallback这样的中间件来重定向 .

nginx的例子

# Default server configuration
server {
  listen 80 default_server;
  server_name myserver.me;
  root /var/www/app;
  # Routes without file extension e.g. /user/1
  location / {
    try_files $uri /index.html;
  }
  # 404 if a file is requested (so the main app isn't served)
  location ~ ^.+\..+$ {
    try_files $uri =404;
  }
}

等等

回复于 2024-04-19T12:15:34+08:00

React Reloading Page在Server上不起作用，但适用于localhost

1 回答

相关问题