为 React 站点设置 Wordpress 博客

Question

我有一个用 React js 构建的网络应用程序。我想将 Wordpress 博客设置为 domain.com/blog 路径。

现在我正在使用 Apache 托管站点（使用 AWS 上的 Elastic Beanstalk 托管），我们很快计划实施服务器端渲染，因此最终将使用 Node + Express。

正确的实施方法应该是什么？我应该在 Load Balancer 端处理它还是需要调整 React 路由才能实现它？

编辑 - 我有 domain.com（网络应用程序）的应用程序负载平衡器。我还需要从域访问的 Wordpress 博客有一个不同的 EC2 实例。com/blog。现在我的痛点是 domain.com/blog 将是 React Router 的有效路由，但我需要将 domain.com/blog 指向托管 Wordpress 博客的 EC2 实例。

Answer 1

我创建了一个 react starter you can download from here。解决方案也在另一个分支上。您可以下载文件，运行 yarn 或 npm install（无论您喜欢哪个），然后 yarn start 或 npm 运行 start。您会看到我们的简单页面，但会注意到没有任何内容。让我们开始吧，添加一些内容。

安装必要的包

如果我们打开 package.json 文件，我们可以看到我已经包含了 react、react-dom 和 bulma 来构建我们的前端。在我们进一步使用我们的 React js 应用程序之前，我们需要添加更多的包。

我们可以添加 Axios which is a package that allows us to make http requests from our application without any hassle. React-router 可用于创建路由，这意味着我们可以在不刷新浏览器的情况下切换页面或组件。要安装这两个包，我们可以在终端中使用以下代码：

npm install axios react-router

将 React Router 添加到 App.js 文件

现在我们已经安装了新的包，我们需要在我们的 app.js 文件中设置 react-router 来告诉我们的浏览器当在地址栏中输入不同的路径时应该显示什么。首先，我们需要从文件顶部的 react-router 导入我们需要的部分。在导入的底部，添加以下代码：

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

现在我们已经导入了react-router，我们可以使用这些组件来设置路由。我们当前的 app.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"));

要向我们的 app.js 组件添加路由器，我们需要将最外层包裹在一个组件中，以便我们可以设置应用程序的路由。然后我们可以用这两条路由替换我们的标签：

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

让我们分解一下：

我们的第一个路由告诉 reactjs 在用户访问 home 路由时显示一个名为 PostList 的组件 (http://localhost:1234)。 exact属性是指它需要精确匹配这条路由，也就是说如果我们之后有什么它就不会走这条路由。

当用户访问通配符路由时，第二个路由将显示一个名为 PostView 的组件。 :slug 表示斜线后的任何字符串在我们的应用程序中都是不同的路由。在我们的例子中，这个字符串或 slug（因为我们就是这样命名的）将成为 TechC运行ch 博客 post 的 slug。我们的 app.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 组件中。

为 React 站点设置 Wordpress 博客

Setting up Wordpress blog for React site

wordpress

amazon-web-services

reactjs

server-side-rendering