Reactjs 使用Nginx在路由更改时将Redux状态反应为init

我正在构建一个应用程序，以

React

作为前端，

Postgres

作为db，

Express.js

作为api和

Nginx

来管理路由。我的react应用程序使用

react路由器

和

Redux

进行状态管理。我发现我的

Redux

状态在路由更改时被重置。我想这是因为我正在使用

Ngnix

路由请求，并从一开始就重新启动，而不保留状态

我看到过一些例子，建议在同一个

Docker

映像中使用

Nginx

和

React

，方法是分两个阶段：一个用于React的构建，然后在第二步将构建复制到

Nginx

映像文件夹。然后使用此图像在docker compose中定义单个服务

如果路由中也有API服务（这是一个单独的

Docker

图像），我们将如何处理这个问题？是否有更好的方法（生产级）

Nginx conf文件

upstream client {
    server client:3000;  
}

upstream api {
    server api:5000;  
}

server {
    listen 80;

    location / {
        proxy_pass  http://client;
    }

    location /sockjs-node {
        proxy_pass  http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }

    location /api/ {
        rewrite /api/(.*) /$1 break;
        proxy_pass  http://api;
    }
}

docker compose.yaml

---

有很多方法可以做到这一点，这取决于你在寻找什么。如果您说您想要产品质量，那么您甚至不必同时托管API和在完全相同的服务器上提供静态文件

通过这条路线，您必须：

• 使用nginx分离

  /api

  请求，并代理在不同端口上运行的Express.js项目
• 忘记nginx吧，使用Express.js还可以为任何不是以

  /api

  开头的请求提供静态文件（但nginx更擅长处理静态文件，您不想占用Node.js进程）

你会发现许多公司在一个单独的子域上托管他们的API，比如

API.twitter.com

如果您这样做，您将在可伸缩性、安全性、维护等方面拥有更大的灵活性。如果您继续在一台服务器上开发所有内容，您将需要更快地进行负载平衡，并为您想要的任何其他服务处理更多代理

至于Redux问题，您必须在某处执行正常的重定向，而不是实际使用React-Router，因为React-Router使用JavaScript

history

对象对URL路径等进行更改，这永远不会导致Redux状态被清除

---

如果您想在其他地方导航而不使用

链接

元素，那么您也可以只使用

历史。推送（“/anypath youwant”）
您使用的是哪种路由器？浏览器路由器、内存路由器还是哈希路由器？似乎所有路由器都可以在您的环境设置中工作。请仔细检查您是否使用了组件而不是。我使用的是浏览器路由器。理想情况下，如果是SPA，获取另一条路由的请求不应转到Nginx。它应该在客户机上处理side@gnujoow可能是对的，听起来像是一些触发整个站点重新加载的代码。你能展示你的react代码吗？你是如何从一条路线切换到另一条路线的？
version: "3"
services:
  postgres:
    image: "postgres:latest"
    environment:
      - POSTGRES_PASSWORD=postgres_password
  api:
    build:
      dockerfile: DockerFile.dev
      context: ./server
    volumes:
      - /app/node_modules
      - ./server:/app
    environment:
      - PGUSER=postgres
      - PGHOST=postgres
      - PGDATABASE=postgres
      - PGPASSWORD=postgres_password
      - PGPORT=5432
    depends_on:
      - postgres
  client:
    stdin_open: true
    build:
      dockerfile: DockerFile.dev
      context: ./client
    volumes:
      - /app/node_modules
      - ./client:/app
    depends_on:
      - api
  nginx:
    restart: always
    build:
      dockerfile: DockerFile.dev
      context: ./nginx
    ports:
      - "3050:80"
    depends_on:
      - client