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

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

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

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

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

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

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

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

非常感谢你

回答(1)

2 years ago

你需要有一个处理浏览器历史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;
  }
}

等等