首页 文章

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

提问于
浏览 1210
0

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

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

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

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

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

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

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

非常感谢你

1 回答

  • 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;
      }
    }
    

    等等

相关问题