Реагировать на маршрутизацию в WordPress

Question

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

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

Answer 1

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

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');
}

Вам необходимо указать baseName в React Router:

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

Answer 2

Да, ответ лежит в файле .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 на своем сервере.