React Router 使用 Nginx 刷新 404

Question

在我开始之前，我想说我确实找到了这个问题和类似的问题，但解决方案不起作用。

问题：刷新反应页面，或尝试直接转到 URL(例如：www.sitecensored.com/portfolio(会给我一个 404 错误。

我已经将 Nginx 设置为从端口 80 到 3000 (React( 的反向代理。React 正在使用 pm2 serve 提供服务。

位置/API 由 node/express 处理

位置/正在由 React 处理

当我添加try_files时，我从Nginx得到一个501。我猜缺少一个步骤，但我对 Nginx 不够熟悉，不知道该步骤是什么。

React 不依赖 Node 或 Express，只依赖 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;
    }
 }

反应

<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.josn中提及主路径，以构建要在package.json中设置的主路径 主页网址：domain.com

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

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