Блог

Сначала я нашел разные ответы, но никто не работает.

Я использую WP как без заголовка. Я могу правильно отображать список сообщений и результаты публикации. Но чего я не могу сделать, так это отобразить содержимое одного сообщения, если я передаю slug в URL, а не в ID.

домен / posts / 10 > работает домен / posts / my-slug > НЕ работает

И вот код (я удаляю ненужный код):

Основная оболочка контейнера:

 import React, { Component } from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route
} from "react-router-dom";

import Blog from './Blog';
import SinglePost from "../components/Blog/SinglePost";


class MainContainer extends Component {
    render() {
        return (
            <Router>
                <Header/>
                <main>
                    <Switch>

                        <Route exact path="/blog" component={Blog}>
                        </Route>
                        <Route exact path="/posts/:slug" component={SinglePost}>
                        </Route>
                        <Route path="/about">
                            <About />
                        </Route>
                        <Route path="/">
                            <Home />
                        </Route>
                    </Switch>
                </main>
            </Router>
        )
    }
}

export default MainContainer;
  

Список сообщений:

 import React, { Component } from 'react';
import axiosConfig from "../../axiosConfig";
import { Link, withRouter } from 'react-router-dom';
import renderHTML from 'react-render-html';
import Moment from 'react-moment';
import styled from "styled-components";


const Card = styled.article `
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
    // background:${color.lightGrey};
    margin-bottom: 2em;
`;


const MAX_LENGTH = 140;
class Posts extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            loading: false,
            posts: [],
            error:''
        }
    }
    componentDidMount() {
        this.setState({loading:true}, () => {
            axiosConfig.get(`/posts`)
                .then( res => {
                    this.setState({loading: false, posts: res.data})
                })
                .catch( error => this.setState({loading:false, error: error.response.data}))
        });
    }

    render() {
        const { posts } = this.state;
        return(
            <div className="container">
                { posts.length ? (
                    <div>
                        { posts.map( post => (
                            <Card key={post.slug}>
                                <Image>
                                    <img src={post.images.medium} alt=""/>
                                </Image>
                                <Text>
                                    <TextInner>
                                        {/*Title*/}
                                            <h2>
                                                <Link to={`/posts/${post.slug}`}> { post.title.rendered } </Link>
                                               
                                            </h2>

                                        {/*Data*/}
                                        <Moment locale={"pt"} format="LL">{post.date}</Moment>
                                        {/*body*/}
                                        {renderHTML(post.excerpt.rendered.substring(0, MAX_LENGTH))}
                                        <Link className="btn" to={`/posts/${post.slug}`}>
                                            Ver mais
                                        </Link>
                                    </TextInner>
                                </Text>
                            </Card>
                        ))}
                    </div>
                ) : '' }
            </div>
        );
    }
}

export default withRouter(Posts);
  

Один пост

 import React, { Component } from 'react';
import axiosConfig from "../../axiosConfig";
import { withRouter } from 'react-router-dom';
import renderHTML from 'react-render-html';
import Moment from 'react-moment';
import styled from "styled-components";

const MainArticle = styled.article `
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    // background:${color.lightGrey};
    margin-bottom: 2em;
`;

class SinglePost extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            loading: false,
            post: {},
            error:''
        }
    }
    componentDidMount() {
        this.setState({loading:true}, () => { /* Changing this line for .params.slug do not work */
            axiosConfig.get(`/posts/${this.props.match.params.id}`)
                .then( res => {
                    this.setState({loading: false, post: res.data})
                })
                .catch( error => this.setState({loading:false, error: error.response.data}))
        });
    }

    render() {
        const { post } = this.state;
        return(
            <>
                { Object.keys( post ).length ? (
                    <div>
                            <MainArticle key={ post.slug }>
                                <TopImage>
                                    <img src={post.images.large} alt=""/>
                                    <h1>{ post.title.rendered }</h1>
                                </TopImage>
                                <Text>
                                    <TextInner>

                                        <h2>{ post.slug }</h2>
                                        {renderHTML(post.content.rendered)}

                                        {/*Date*/}
                                        <Moment locale={"pt"} format="LL">{post.date}</Moment>
                                        
                                    </TextInner>
                                </Text>
                            </MainArticle>
                    </div>
                ) : '' }
            </>
        );
    }
}

export default withRouter(SinglePost);
  

Должен быть домен/posts/?slug=my-slug .

Затем вы должны иметь возможность запускать в React:

 axiosConfig.get('domain/posts/', { params: {slug: 'my-slug' } });