ReactJS 应用程序上的动态 URL 与使用 Rest API 的 wordpress 相同 - Wordpress答案

【问题标题】：Dynamic URLs on a ReactJS App same like wordpress Using Rest API - WordpressReactJS 应用程序上的动态 URL 与使用 Rest API 的 wordpress 相同 - Wordpress
【发布时间】：2018-06-17 18:33:43
【问题描述】：

我的wordpress网站如下

页面和帖子只是 /slug-of-page 或 /slug-post
类别 /category/category-slug
标签 /tag/tag-slug

我有一个使用 WP REST API 的原型 react JS 应用程序，是否可以在 react 应用程序中匹配这个 URL 映射，这样我就不会丢失我们在这些页面上拥有的 SEO。我有数百个标签和猫。

我是一名新手 ReactJS/Web 开发人员。我正在考虑将 wordpress 站点移动到子域，然后在主域上提供 reactJS 应用程序。

问候，将感谢任何帮助。

【问题讨论】：

标签： wordpress reactjs rest api

【解决方案1】：

是的，您可以使用匹配对象匹配此 URL 映射。

这是我映射 Posts WP Rest API Route 的 URL 的示例。发帖路线：'https://youu-wp-site-here.com/wp-json/wp/v2/posts'

我假设你有来自你的 wp 站点 POSTS 路由的 WP Rest API 数据以及您已经在 React 应用程序中映射的帖子数据..

在我的帖子页面中，我有这两条路线：

<Route path={`${match.path}`} render={(props) => render={( invoke the component here ) => ()} />
<Route path={`${match.path}/:topicId`} render={() => ( invoke the component here )} />

这在你的路由中的渲染组件中导航到单个帖子。

<Link 
 className='btn btn-outline-success' 
 role='button' 
 to={`${match.url}/${post.title.rendered.replace(/\s+/g, '-').toLowerCase()}`} 
>Read more &rarr;</Link>

这是 github 仓库 -> https://github.com/jun20/React-JS-and-WP-Rest-API/tree/posts-api-and-blog-layout-FINAL

【讨论】：