如何使用 Nextjs 中的链接获取数据

Question

我的数据存储在 Mongo Atlas 中。我可以获取数据（帖子），但是当我点击帖子时，它不会为我提供该 ID 的数据。我创建了一个页面/帖子页面。由于下面的代码位于 postlist.tsx 中，我只能查看帖子的 ID，并且只能通过其 url 将 ID 传递到下一页。我还希望能够查看与该特定 ID 关联的帖子的标题和正文：

这是我的 blogs.tsx

    interface PostState{
        posts: Post[];
    }

    export default class PostList extends React.Component <{},PostState> {
            state = {
                posts: []
            };

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

            getBlogPost = () => {

                axios
                    .get('/api')
                    .then(({data}) => {
                        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 : Post[]) => {
                const currentDateTime = new Date();
                if (!posts.length) 
                    return null;

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

                            <Link href={`/post?id=${post._id}`} as= . 
       {`/post/${post._id}`}></Title>
                        {/* <p>{post.date}</p>
                        <p>{post.name}</p> */}

                        <FullName>{`${post.name} | 
       ${dateToString(currentDateTime)}`}</FullName>
                        <Line />
                        <Question >{post.body}</Question>
                        </Card>
                    </div>
                ));
            }

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

                );
            }

    }

Answer 1

首先你应该创建帖子route

pages/post/index.js

import React from 'react'

class Post extends React.Component {
  static async getInitialProps({ query }) {
    return { query };
  }

  render() {
    return <div>id: {this.props.query.id}</div>
  }
}

export default Post

然后创建 pages/post/[id].js

import Post from './index'
export default Post

现在，当您打开 localhost:port/post/22 或 localhost:port/post?id=22 时，它应该会显示数字 22。

要链接到另一个页面的帖子，您可以创建以下链接：

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

如果这仍然不起作用，请向我们展示代码（在 github 上）。

如果它有效，那么现在您可以将 id 传递给帖子页面，因此您只需要获取帖子。您可以在getInitialProps 中做到这一点

class Post extends React.Component {
  static async getInitialProps({query}) {
    const post = await axios.get(url, { // make sure the url is full url, no relative urls
      params: {
        id: query.id
      }
    })
    return { post: post.data }
  }

  render() {
    return (
      <pre>
        post:{' '}
        {JSON.stringify(this.props.post, undefined, 2)}
      </pre>
    )
  }
}