Question

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

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

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

编辑-我具有domain.com（网络应用程序）的应用程序负载平衡器。另外，对于Wordpress博客，我还有另一个EC2实例，我需要从domain.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 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} />

让我们细分一下：

我们的第一个路线告诉用户在访问本地路线（http://localhost:1234）时显示一个名为PostList的组件。确切的属性表示它需要与该路线完全匹配，这意味着如果我们在此之后有任何东西，它将不会进入该路线。

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

1 个答案: