Могу ли я разместить одно и то же приложение реакции на двух разных путях на моем сайте?

Question

Мои текущие настройки

• У меня есть веб-сайт, созданный с использованием базовых HTML + CSS.(скажем https://example.com)
• Я разместил приложение реагирования на https://example.com/register

. Для этого я установил в свой пакет. 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/;
    }
}

Вот что я хочу сделать. Я хочу разместить такое же приложение реакции в URLexample.com/pricing.

Как мне этого добиться? Я хочу иметь наименьшее дублирование кода / логики и т. Д.

Answer 1

Одним из решений является создание двух отдельных сборок: одна для /register и одна для /pricing.

Вместо использования поля homepage в вашем package.json для указания корня, вы можетеиспользуйте для этого переменную окружения PUBLIC_URL и добавьте пользовательскую переменную окружения с именем, например, REACT_APP_BASENAME, которую вы используете для basename подпорки Router.

<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

Это может не сработать для вашей конкретной настройки, но реагирующий маршрутизатор 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