Маршрутный запрос в одну строку

Question

У меня проблемы с отображением моего поста в разных строках. Мои данные получены из MongoAtlas. Я использую Next Js с Typescript.

Я не получаю никаких сообщений об ошибках, но заголовок, тело и идентификатор моего сообщения отображаются в одной строке. Как я могу отделить это так, чтобы оно отображалось в разных строках.

Мой пост отображается так:

Мой пост в блоге # 5e5cb4977b0d2c09a53482b2 ** (id) ** heyyyyy ** ( название) ** 1583133802533 ** (имя) **

Вот мой маршрут на Lists.tsx

function dateToString(date: Date): string {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
        + ` ${date.getHours()}-${date.getMinutes()}-${date.getSeconds()}`;
}

export default class PostList extends React.Component  {
        state = {
            title: '',
            name: '',
            date: '',
            body: '',
            posts: []
        };

        componentDidMount = () => {
            this.getBlogPost();
        };

        getBlogPost = () => {
            // Get posts from database
            axios
                .get('/api')
                .then(({data}) => {
                    // Deep copy
                    const reverseData = new Array;
                    for (let datetime = data.length - 1; datetime >= 0; datetime--) {
                        reverseData.push(data[datetime]);
                    }

                    this.setState({posts: reverseData})

                })
                .catch((error) => {
                    alert('Error: there was an error processing your request')
                })
        }

        displayBlogPost = (posts : Array < any >) => {
            const currentDateTime = new Date();
            if (!posts.length) 
                return null;

            return posts.map((post, index) => (
                <div key={index}>

                    <Card>
                    {/* <Link href={`/post?id=${post._id}`} as={`/post/${post._id}`}><a>{post.title}</a></Link> */}

                    <Title > <Link href={`/post?_id=${post._id} ${post.title} ${post.date}` }><a>{post.title}</a></Link></Title>
                    <FullName>{`${post.name} | ${dateToString(currentDateTime)}`}</FullName>
                    <Line />
                    <Question >{post.body}</Question>
                    </Card>

                </div>
            ));
        }

        render() {

            return (
                <div>

                    <Container>
                    <Nav/>
                    <Headers/>

                    <div className="blog">
                        {this.displayBlogPost(this.state.posts)}
                    </div>

                    </Container>
                </div>

            );
        }
}

Проблема возникает здесь в страниц / post.tsx страницы

import React, { Component } from 'react';

type Props = {
    _id: number;
    title: string;
    body: string;
    postId: string;
};

type QueryParams = {
  _id: string;
  title: string;
  body: string;
  };
export default class Post extends Component <Props> {
    static getInitialProps({ query: { _id, title, body } }: { query: QueryParams }): Partial<Props> {
        return { postId: _id, title, body }; }

  render() {
    return (
      <div>
          <h1> {this.props.title}</h1>
         <h1>My blog post #{this.props.postId}</h1>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
    )
  }
}