介绍
在 WordPress 前端开发中，使用 React 和 React Router 可以帮助我们快速开发出优秀的单页面应用程序。为了解决一些常见问题，@elricb 开发了一个名为 @elricb/wordpress-react-router 的 npm 包。该包提供了一个简单的 React Router 配置，开发者可以使用它快速创建一个单页面应用程序，并使用 WordPress Rest API 进行数据获取。
安装
要使用 @elricb/wordpress-react-router，我们需要首先在我们的项目中安装它。可以通过运行以下命令在项目中安装：
npm install @elricb/wordpress-react-router
使用
在安装完成后，我们需要完成以下步骤才能开始使用该包：
- 创建一个用于存放路由的文件夹（例如: /src/routes）
- 在其中创建适当的路由文件（*.js 文件）。参考下文示例代码中的 router.js 文件
- 在入口文件（例如: /src/index.js）中引入根路由文件（例如: /src/routes/router.js）
- 使用 ReactDOM 渲染 App 组件，注意传递 history 对象
下面是对以上步骤的更详细说明：
创建路由文件夹与路由文件
在你的项目文件夹（例如：src）中创建一个新的文件夹用于存放所有路由文件，例如 routes。在该文件夹中创建每个路由的文件，例如：home.js、about.js、blog.js 等等。填写以下代码：
import React from 'react';
const Blog = () => {
return <h1>This is the Blog Page</h1>;
};
export default Blog;其中 Blog 页面只是一个简单的组件，你可以把它替换成自己需要的组件。
我们的路由文件路劲结构应该如下：
. ├── /src/ │ ├── /routes/ │ │ ├── home.js │ │ ├── about.js │ │ ├── blog.js
引入根路由文件
在根路由文件中我们要做的是创建一个合适的路由配置并导出它。我们可以这么写：
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./home.js";
import About from "./about.js";
import Blog from "./blog.js";
const Router = () => {
return <switch> <route> <route> <route> </switch>
};
export default Router;
其中 Switch 和 Route 是 React Router 库提供的组件。它们能够帮助你构建出完善的路由配置。
启动应用
最后我们需要在 index.js 中重新启动应用。在这里，可以使用 browserHistory、hashHistory 或 memoryHistory。在这里，我们使用 browserHistory。注意要将 history 对象传递给 App 组件。
index.js 文件的代码应该如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- -------------- - ---- ---------------
------ ---------------------------------------
------ --------------
------ --- ---- --------
------ ------ ---- ------------------
-----------------
------- -------------------------
-----
------- --
------
---------
-- ---------------------------------
现在应用就可以像往常一样运行了。过一会儿，就可以开始在我们的路由（即 Home、About 和 Blog）中渲染页面。
示例代码
这里提供一个完整示例代码供参考：
./index.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- -------------- - ---- ---------------
------ ---------------------------------------
------ --------------
------ --- ---- --------
------ ------ ---- ------------------
-----------------
------- -------------------------
-----
------- --
------
---------
-- ---------------------------------
./routes/home.js
import React from 'react';
const Home = () => {
return <h1>This is the Home Page</h1>;
};
export default Home;./routes/about.js
import React from 'react';
const About = () => {
return <h1>This is the About Page</h1>;
};
export default About;./routes/blog.js
import React from 'react';
const Blog = () => {
return <h1>This is the Blog Page</h1>;
};
export default Blog;./routes/router.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ ---- ---- ------------
------ ----- ---- -------------
------ ---- ---- ------------
----- ------ - -- -- -
------ --------
------ ----- -------- ------------------
------ ----- ------------- -------------------
------ ----- ------------ ------------------
---------
--
------ ------- -------这就是 @elricb/wordpress-react-router 的使用教程。希望这篇文章能够帮助大家快速创建出优质的单页应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572ce81e8991b448e9012