时间戳

首页 > 解决方案 > 为 React 站点设置 Wordpress 博客

reactjs - 为 React 站点设置 Wordpress 博客

问题描述

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

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

实施它的正确方法应该是什么？我应该在负载均衡器端处理它还是需要调整 React 路由以实现它？

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

标签： reactjswordpressamazon-web-servicesserver-side-rendering

解决方案

我创建了一个反应启动器，你可以从这里下载。解决方案也在另一个分支上。您可以下载文件，运行 yarn 或 npm install（无论您喜欢哪个），然后运行 ​​yarn start 或 npm run start。您将看到我们的简单页面，但会注意到没有任何内容。让我们开始并添加一些内容。

安装必要的软件包

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

我们可以添加Axios，它是一个允许我们从应用程序发出 http 请求而没有任何麻烦的包。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 在用户访问主路由（ http://localhost:1234）时显示一个名为 PostList 的组件。确切属性意味着它需要精确匹配这个路由，这意味着如果我们之后有任何东西，它就不会去这个路由。

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

推荐阅读