Question

我当前的设置

我有一个使用基本html + css创建的网站。（例如https://example.com）
我在https://example.com/register托管了一个React应用

为此，我已经在我的package.json中设置了

"homepage": "https://example.com/register/"

和我的App.js

<Router history={history} basename="/register">
</Router>

我的NGINX看起来像这样：

server {
    listen 5400;
    access_log /var/log/nginx/wordpress-access.log;
    error_log /var/log/nginx/wordpress-error.log;
    location / {
        root /home/ubuntu/...../build/;
        index index.html;
        expires 1d;
        try_files $uri /index.html;
    }

}


server {
    listen 443 ssl;
    listen [::]:443;
    index  index.php index.html index.htm;
    server_name  example.com;
    location / {
        ... old setup
    }
    location /register {
         proxy_pass http://127.0.1.1:5400/;
    }
}

这就是我想要做的。我想在URL example.com/pricing上托管相同的react应用。

我该如何实现？我希望代码/逻辑等的重复最少。

Answer 1

一种解决方案是执行两个单独的构建，一个用于/register，另一个用于/pricing。

您可以使用环境变量homepage和add a custom environment variable来代替使用package.json中的PUBLIC_URL字段来指定根，而不必使用环境变量REACT_APP_BASENAME。 basename用于Router的{{1}}道具。

<Router history={history} basename={process.env.REACT_APP_BASENAME}>

您的构建脚本将如下所示：

"build:register": "PUBLIC_URL=https://example.com/register/ REACT_APP_BASENAME=/register node scripts/build.js",
"build:pricing": "PUBLIC_URL=https://example.com/pricing/ REACT_APP_BASENAME=/pricing node scripts/build.js"

Answer 2

这可能不适用于您的特定设置，但是react-router v5具有一项新功能，该功能允许同一组件具有多个匹配器：

// Instead of this:
<Switch>
  <Route path="/users/:id" component={User} />
  <Route path="/profile/:id" component={User} />
</Switch>

// you can now do this:
<Route path={["/users/:id", "/profile/:id"]} component={User} />

https://reacttraining.com/blog/react-router-v5/#new-features

我可以在网站的两个不同路径上托管同一个React应用吗？

2 个答案: