Reactjs 动态路由问题

我对动态路由有点困惑，因为我是NextJS新手。我希望它是在这样一种方式，如果有人点击我的网页标题，它会带他们到一个新的网页，其中包括相同的标题和正文。为了实现这一目标，我可以做哪些更改？我签出了许多资源，但它们要么是从a到b，数据是硬编码的

import React from 'react';
import axios from 'axios'
import Link from 'next/link';


class Abc extends React.Component{
    state = {
        title: '',
        body: '',
        posts: []
    };

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



displayBody=(posts: Array<any>)=>{
 if(!posts.length)
 return null;
 return posts.map((post,index)=>(
<div key={index}>

 <Link href={`/post?title=${this.state.title}`} ><a> 
 {post.title}</a></Link>
    <h2>{post.title}</h2>
    <p>{post.body}</p>

</div>
 ));

};
    render() {
        console.log('state', this.state);
        return (
            <div>
                <h2>Welcome to my app</h2>

            <div className="blog">

                {this.displayBody(this.state.posts)}
            </div>


            </div>
        );
    }
}

export default Abc

从“React”导入React；
从“axios”导入axios
从“下一个/链接”导入链接；
类Abc扩展了React.Component{
状态={
标题：“”，
正文：“”，
员额：[]
};
componentDidMount=（）=>{
这是getBlogPost（）；
};
displayBody=（posts:Array）
{post.title}
{post.body}

));
};
render（）{
console.log（'state'，this.state）；
返回(
欢迎使用我的应用程序
{this.displayBody（this.state.posts）}
);
}
}
导出默认Abc

如果有人点击我文章的标题，它会把他们带到一个新页面 由相同的标题和正文组成

您的意思是，标题和正文是根据用户单击的参数从MongoDB获取的吗

如果是，因为您使用的是ExpressJS，您可以在Github上查看他们的示例：

server.get('/posts/:id', (req, res) => {
  return app.render(req, res, '/posts', { id: req.params.id })
})

有一个API

/posts/:id

，它基本上满足了您想要实现的目标。其思想是从用户的请求中获取唯一的参数，然后将该参数转发到您的特定页面，并根据用户的参数调用API获取MongoDB

更新答案

这就是

页面/帖子的样子：

import React, { Component } from 'react'

export default class extends Component {
  static getInitialProps({ query: { id, title, body } }) {
    return { postId: id, title, body }
  }

  render() {
    return (
      <div>
        <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>
    )
  }
}

如果该示例不起作用，则需要将其与来自
next/router
的
withRouter
组合，以访问来自router对象的查询

完整示例：
我已经添加了我的服务器文件，可以获取和发布我的请求。我还添加了我的服务器代码。目前我的项目只有两个文件。Index.ts和server.ts。您可以检查一下，因为使用“Link href”我可以创建指向我的标题的链接，但其中没有显示任何内容（索引文件）@Darryl rn您的服务器文件已经正确，具有侦听get
/API
和post
/API/save
的API。现在，您需要做的是再添加一个API，听get
/[your\u preference\u path]/[unique\u id]
，就像我回答的示例一样。这正是我的问题所在，我如何创建该API？server.get（'/posts/:id'，（req，res）=>{.return app.render（req，res，'/posts'，{id:req.params.id}）我也在我的server.js中创建了它，并在其中创建了一个页面文件。我在页面文件（API）中提到了什么来实现这一点？你能发个代码片段来帮我吗？@Darryl，那尸体和头衔呢？我尝试添加{this.props.body}和{this.props.title}，但它只显示id，而不显示与id@Darryl RN关联的标题和正文。您不会通过
next/router
query发送标题和正文，是吗？页面中有API调用者的原因是根据从用户请求的查询中获得的ID获取标题和正文。
<Link href={{ pathname: `/post?title=${this.state.title}`, query: { title: this.state.title, body: this.state.body } }}>
    <a>{post.title}</a>
</Link>