Question

我正在使用React来构建使用Wordpress作为后端的网站的前端。我的目标是模仿Worpdress中最简单的固定链接结构，即站点域+页面或帖子的slug，而不添加任何/posts/或/news/或其他任何内容。换句话说，帖子为http://example.com/hello-world/，页面为http://example.com/about/。

我是React的新手，我在理解如何使用React Router时遇到了一些麻烦。

这是我到目前为止所拥有的：

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import HomePage from './pages/HomePage';
import MainHeader from './components/main-header/MainHeader';
import SinglePost from './pages/SinglePost';

const Layout = () => {

    return (
        <div>
            <MainHeader />
            <Switch>
                <Route exact path="/" component={ HomePage } />
                <Route exact path="/:slug" render={ props => <SinglePost { ...props } /> } />
                <Route render={ () => { return( <p>Not Found</p> ) } } />
            </Switch>
        </div>
    );

}

export default Layout;

这适用于加载具有我上面提到的永久链接结构的单个帖子，例如http://example.com/hello-world。问题是，当我尝试访问http://example.com/about这样的页面时，path="/:slug"也匹配，这意味着SinglePost组件也将用于页面，而我想要使用不同的。

如何为单个帖子和页面使用不同的组件，同时保持相同的永久链接结构？

顺便说一句，下面是我如何呈现我的帖子列表，以及每个帖子的链接。我应该以某种方式编辑Link吗？

import React from 'react';
import { Route, Link } from 'react-router-dom';

const ListPosts = ( props ) => {

    let postsList = props.posts.map( ( post, index ) => {
        return( 
            <article key={ index }>
                <h2><Link to={ post.slug }>{ post.title.rendered }</Link></h2>
            </article>
        )
    });

    return (
        <section className="posts">
            <h1>Posts</h1>
            { postsList }
        </section>
    );

}

export default ListPosts;

在React应用程序中模仿Wordpress永久链接结构

0 个答案: