React JS BrowserRouter + Express JS + Nginx 代理没有正确生根

Question

我的问题是我想通过 URL 将参数传递给 React 组件。如果我通过 localhost 开发环境尝试，一切正常。

我的问题仅在我将 React 应用程序部署到我的运行时服务器时出现。 (https://panel.nuerk-solutions.de/dvb)

我使用https://pterodactyl.io/，它实际上是一个 GamesServerPanel。

现在 Pterodactyl 只为我管理 Docker 容器，并且可以为这些容器打开端口。到目前为止，一切正常。除此之外，我使用 Express 作为服务器（参见配置）。 然后我在我的 Nginx-Config 中配置了一个代理，将 IP 地址重定向到这个域：https://panel.nuerk-solutions.de/dvb。到目前为止，一切仍然有效。只有当我尝试在 URL 中设置我的参数时：https://panel.nuerk-solutions.de/dvb/Hbf/3/5 才会出现一个白页，并出现错误，如下所示。出于某种原因，它尝试访问/dvb/Hbf/3，然后访问文件。为什么会这样？

我只想将参数Hbf、3 和5 传递给组件。

感谢您的帮助！

Console Output

Docker 容器 - 快速日志：

container@pterodactyl~ Server marked as running...
v16.6.1
:/home/container$ npm install && npm run start

up to date, audited 55 packages in 843ms

found 0 vulnerabilities

> backend@1.0.0 start
> node index

Server Ready!
GET /dvb 304 5.365 ms - -
GET /static/css/main.a334b880.chunk.css 304 0.810 ms - -
GET /static/css/2.ed1298f3.chunk.css 304 0.411 ms - -
GET /static/js/main.5eb45bf9.chunk.js 304 0.424 ms - -
GET /static/js/2.6ba6ee6f.chunk.js 304 0.522 ms - -
GET /manifest.json 304 0.513 ms - -
GET /logo192.png 304 0.550 ms - -
------------------------
GET /dvb/Hbf/3/5 200 4.206 ms - 2286
GET /dvb/Hbf/3/static/css/main.a334b880.chunk.css 200 1.639 ms - 2286
GET /dvb/Hbf/3/static/js/main.5eb45bf9.chunk.js 200 2.164 ms - 2286
GET /dvb/Hbf/3/static/js/2.6ba6ee6f.chunk.js 200 2.228 ms - 2286
GET /dvb/Hbf/3/static/css/2.ed1298f3.chunk.css 200 2.379 ms - 2286
GET /dvb/Hbf/3/manifest.json 200 1.303 ms - 2286
GET /dvb/Hbf/3/favicon.ico 200 1.396 ms - 2286
GET /dvb/Hbf/3/static/css/main.a334b880.chunk.css 304 1.040 ms - -
GET /dvb/Hbf/3/static/css/2.ed1298f3.chunk.css 304 0.600 ms - -
GET /dvb/Hbf/3/manifest.json 304 0.743 ms - -

Nginx 配置：

server {
    listen 80;
    server_name panel.nuerk-solutions.de;
    return 301 https://$server_name$request_uri;    
}

server {
    listen 80;
    listen [::]:80;

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    
    server_name panel.nuerk-solutions.de;

    ssl on;
    ssl_certificate /etc/ssl/certs/cert.pem;
    ssl_certificate_key /etc/ssl/private/key.pem;
    ssl_client_certificate /etc/ssl/certs/origin-pull-ca.pem;
    ssl_verify_client on;

    location / {
        proxy_pass http://134.255.234.93:2086;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_intercept_errors on;
        proxy_redirect off;
    }

反应代码：

import {DvbWidget} from "./dvb/Dvb";
import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom';
import Quote from "./qutoe/Quote";

function App() {
    return (
        <Router
        forceRefresh={true}>
            <Navbar>
                <NavItem icon={<PlusIcon/>} destinationPath="/dvb"/>
                <NavItem icon={<BellIcon/>} destinationPath="/quote"/>
                <NavItem icon={<MessengerIcon/>}/>
                <NavItem icon={<CaretIcon/>}>
                    <DropdownMenu/>
                </NavItem>
            </Navbar>

            <Switch>
                <Route exact path="/dvb/:stop?/:amount?/:offset?"
                       children={() => <DvbWidget name={"MainStaion"}/>}/>
                <Route path="/quote" children={() => <Quote />}/>
            </Switch>
        </Router>
    );
}

快递代码：

const express = require('express');
const app = express();
const path = require('path');
const morgan = require("morgan");

app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req, res, next) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(2086);
console.log("Server Ready!");

Answer 1

解决方法是将manifest.json中的start_url和package.json中的homepage设置为/。