Question

在我开始之前，我想说我确实找到this question和类似的但是解决方案不起作用。

问题：刷新反应页面或尝试直接进入网址（例如：www.sitecensored.com/portfolio）会给我一个404错误。

我已将Nginx设置为从端口80到3000（React）的反向代理。 React正在使用pm2服务。

location / api由node / express

处理

位置/正在由React处理

当我添加try_files时，我从Nginx获得501。我猜测有一个步骤缺失，但我对Nginx不太熟悉，不知道该步骤是什么。

React不依赖于Node或Express，只依赖于Nginx。目前，它们仅用于处理联系表单的服务器端处理。

NGINX

server {

    listen [::]:80 ipv6only=off;

    server_name www.sitecensored.com sitecensored.com;

    location /api {
            proxy_pass http://127.0.0.1:3001;
    }

    location / {
            root /srv/www.sitecensored.com/client/build;
            proxy_pass http://localhost:3000;
            proxy_http_version 1.1;
            proxy_set_header X-Forwarded-For $remote_addr;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-NginX-Proxy true;
            proxy_redirect off;
            proxy_set_header Connection "upgrade";
            proxy_set_header X-Client-Verify SUCCESS;
            proxy_redirect off;
            proxy_set_header X-Forwarded-Proto $scheme;
    }
 }

REACT

<Router key="router">
    <div>
      {/* top navigation bar including Page title */}
      <Navbar key="navbar" />
      <Switch key="switch">

        <Route key="homeroute" exact path="/" component={Home} />

        <Route key="websiteroute" exact path="/about/website" component={Website} />

        <Route key="portfolioroute" exact path="/portfolio" component={Portfolio} />

        <Route key="faqroute" exact path="/faq" component={FAQ} />

        <Route key="resumeroute" exact path="/resume" component={Resume} />

        <Route key="contactroute" exact path="/contact" component={Contact} />
      </Switch>
    </div>
  </Router>

当然，如果我做错了什么，愚蠢或需要更多信息，请告诉我。

谢谢！

Answer 1

我希望我可以在评论中提出这个问题，但我没有代表这样做。当您说清爽时，您可以在以下位置刷新：www.sitecensored.com/about/website或www.sitecensored.com/？此外，您可以尝试将其他nginx块放入测试中，如下所示：

location /portfolio {
        proxy_pass http://localhost:3000;
        proxy_redirect     off;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
}

并告诉我它是否加载你的反应应用程序？这样做有助于确认我对此问题的一些怀疑。

Answer 2

在创建要在package.json主页URL中进行设置的内容之前，必须在package.josn中提及home路径

错误：使用响应历史记录或将URL保留在响应端的哈希路由器的Nginx配置上没有错误

<HashRouter history={history}> 
   <Route path='/' component={IndexPage} exact={true} /> 
</HashRouter> ```

Answer 3

您必须先在package.josn中提及home路径，然后才能创建将其设置为package.json home URL：yoururl.com

错误：您使用React历史记录或哈希路由器的Nginx配置没有错误，可以在React代码中将URL保留在React端更新中

<HashRouter history={history}> 
   <Route path='/' component={IndexPage} exact={true} /> 
</HashRouter> ```

使用Nginx

3 个答案: