Блог

Я создаю react SPA с WordPress, работающим в качестве серверной части, но он не безголовый, поэтому весь интерфейс включен в тему. Я просто запускаю сборку npm и ставлю в очередь производственные файлы в functions.php файл. Приложение отображается в <div id="root"></div> файле шаблона. Моя установка WordPress настроена на статическую домашнюю страницу, которая использует шаблон, содержащий корневой каталог React.

Кажется, это работает просто отлично, кроме маршрутизатора. Если я перейду, скажем, на другой адрес https://mywebsite/about , он попытается загрузить страницу WordPress с именем about , вместо того, чтобы оставаться на той же странице и использовать маршрутизатор для отображения соответствующего компонента. Есть ли какие-то настройки, которые я должен изменить в файле .htaccess? Или есть что-то еще, чего мне не хватает?

Если у вас есть приложение React на вашей странице WP, и вы не хотите редактировать .htaccess, вы также можете добавить правила перезаписи с помощью add_rewrite_rule() в functions.php перенаправлять все запросы на страницу вашего приложения react на WP, которые будут обрабатываться маршрутизатором React.

 add_action('init', 'wp55290310_rewrite_rules');

function wp55290310_rewrite_rules() {
    add_rewrite_rule('^your-react-app-root/(. )?', 'index.php?pagename=your-react-page-name', 'top');
}
  

Вам нужно указать базовое имя в React Router:

 <BrowserRouter basename="/your-react-app-root">
  <Switch>
      <Route exact path="/" component={SomeComponent} />
      <Route exact path="/other-page" component={OtherComponent} />
  </Switch>
</BrowserRouter>
  

Да, ответ лежит внутри файла .htaccess.

Вам нужно настроить общее правило, которое будет обслуживать index.php файл для всех маршрутов вместо того, чтобы пытаться найти соответствующий php-файл для маршрута, который происходит сейчас.

Вы должны быть в состоянии использовать эту конфигурацию для достижения такого поведения:

 # BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
  

Решение подразумевает, что вы используете modrewrite на своем сервере.