Настройка блога Wordpress для сайта React - PullRequest
Новая
       4

Настройка блога Wordpress для сайта React

0 голосов
/ 21 января 2020

У меня есть веб-приложение, созданное с реакции js. Я хочу настроить блог Wordpress на путь domain.com / blog .

Прямо сейчас я использую Apache для размещения сайта (размещен на Elasti c Beanstalk на AWS), и мы скоро планируем внедрить рендеринг на стороне сервера, поэтому в итоге получим Node + Express ,

Каким должен быть правильный подход для его реализации? Должен ли я справиться с этим в конце Load Balancer или нужно настроить маршруты React для реализации этого?

Редактировать - у меня есть балансировщик нагрузки приложения для domain.com (веб-приложение). Также у меня есть другой экземпляр EC2 для блога Wordpress, к которому мне нужно получить доступ с domain.com/blog. Теперь моя проблема в том, что domain.com/blog будет правильным маршрутом для React Router, но мне нужно указать domain.com/blog на тот экземпляр EC2, на котором размещен блог Wordpress.

1 Ответ

1 голос
/ 21 января 2020

Я создал реактивный стартер, который вы можете скачать здесь . Решение также есть в другой ветке. Вы можете загрузить файлы, запустить пряжу или npm установить (в зависимости от того, что вы предпочитаете), а затем запустить пряжу или npm запустить запуск. Вы увидите нашу простую страницу, но заметите, что там нет никакого контента. Давайте начнем и добавим некоторый контент.

Установите необходимые пакеты

Если мы откроем файл пакета. json, мы увидим, что я уже включил , реаги-дом и булма, чтобы построить наш фронтэнд. Прежде чем мы сможем go далее с нашим приложением реагировать js, нам нужно добавить еще несколько пакетов.

Мы можем добавить Ax ios, который позволяет нам сделать http-запросы из нашего приложения без каких-либо хлопот. React-router может использоваться для создания маршрутов, что означает, что мы можем переключать страницы или компоненты без браузера refre sh. Чтобы установить эти два пакета, мы можем использовать следующий код в нашем терминале: 

npm install axios react-router

Добавить React Router в приложение. js file

Теперь, когда мы Если у нас установлены новые пакеты, нам нужно настроить реагирующий маршрутизатор в нашем приложении. Файл js сообщает нашему браузеру, что должно отображаться при вводе различных путей в адресную строку. Для начала нам нужно импортировать нужные нам кусочки из реагирующего маршрутизатора вверху файла. В нижней части импорта добавьте следующий код: 

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

Теперь, когда мы импортировали реагирующий маршрутизатор, мы можем использовать эти компоненты для настройки маршрутов. Наш текущий файл приложения. js выглядит примерно так: 

import React from "react";
import ReactDOM from "react-dom";
import Header from "./components/header";

const App = () => (
  <div>
    <Header />
    <section className="section container content">
      <h1>Hello World</h1>
    </section>
  </div>
);

ReactDOM.render(<App />, document.getElementById("app"));

Чтобы добавить маршрутизатор к нашему компоненту приложения. js, нам нужно обернуть самый внешний компонент в компонент, чтобы мы могли настроить наш маршруты приложения. Затем мы можем заменить наш тег следующими двумя маршрутами: 

<Route exact path="/" component={PostList} />
<Route path="/:slug" component={PostView} />

Давайте разберем это:

Наш первый маршрут говорит reactjs показать компонент с именем PostList когда пользователь посещает домашний маршрут (http://localhost: 1234 ). Точный атрибут означает, что он должен точно соответствовать этому маршруту, что означает, что если после этого у нас будет что-либо, он не будет go этому маршруту.

Второй маршрут покажет компонент с именем PostView, когда пользователь посещает маршрутный символ. : Slug обозначает, что любая строка после sla sh будет другим маршрутом в нашем приложении. В нашем случае эта строка или слаг (так мы его назвали) будут слагом для сообщения в блоге TechCrunch. Файл нашего приложения. js теперь должен выглядеть следующим образом: 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Header from "./components/header";
import PostList from "./components/postList";
import PostView from "./components/postView";

const App = () => (
  <Router>
    <div>
      <Header />
      <section className="section container content">
        <Route exact path="/" component={PostList} />
        <Route path="/:slug" component={PostView} />
      </section>
    </div>
  </Router>
);

ReactDOM.render(<App />, document.getElementById("app"));

Далее нам нужно создать компоненты PostList и PostView и импортировать их в компонент app.js.

...