我正在使用React构建一个markdown博客。我想在文章页面的页脚添加下一篇和上一篇文章按钮。下面是代码-

App.tsx-

<Route path="/blog">
  <Route index element={<BlogPage />} />
  <Route path=":postID" element={<Postpage />} />
</Route>;

字符串

city.jsonfile-

[
    {
      "header": "Michigan ",
      "id": "MI",
      "PlaceList": [
        {
          "title": "Detroit",
          "url": "detroit"
        },
        {
          "title": "Lansing ",
          "url": "lansing"
        }
      ]
    },
    {
      "header": "Iowa ",
      "id": "IA",
      "PlaceList": [
        {
          "title": "Ames",
          "url": "ames"
        },
        {
          "title": "Davenport ",
          "url": "davenport"
        }
      ]
    }
  ]

型
在markdown文件夹中，我有文件名为-detroid.md，lansing.md，ames.md。因此，当postID与文件名匹配时，它会显示在Post页面上。

Postpage.tsx是-

import { useParams } from 'react-router-dom';
import City from './city.json';
import { PostTitle, PageHeading } from '../../components/Header';
import { useEffect, useState } from 'react';

import Markdown from 'react-markdown';

const PostPage = () => {
  //Get chapter ID from URL
  const { postID } = useParams();

  // Create a flat map
  const allPosts = City.flatMap(({ header, id, PlaceList }) =>
    PlaceList.map((topics) => ({
      sectionName: header,
      sectionId: id,
      ...topics,
    })),
  );

  // Filter by url
  const filterPosts = allPosts.filter(({ url }) => url.trim() === postID);
  // console.log(allPosts);

  const folderName = filterPosts.map((post) => post.sectionId);

  //Postitle
  const pageTitle = String(filterPosts.map((post) => post.title));

  const [page, setPage] = useState(1);
  const [posts, setPosts] = useState('');

  //Get the post body
  useEffect(() => {
    import(`./${folderName}/${postID}.md`)
      .then((res) => {
        fetch(res.default)
          .then((res) => res.text())
          .then((res) => setPosts(res))
          .catch((err) => console.log(err));
      })
      .catch((err) => console.log(err));
  });

  const nextPage = () => setPage((prev) => prev + 1);
  const prevPage = () => setPage((prev) => prev - 1);

  //Creates the browser heading
  PageHeading(pageTitle);

  return (
    <article>
      <PostTitle pageTitle={pageTitle} />

      <Markdown>{posts}</Markdown>

      <button
        className="float-left text-teal-600"
        onClick={prevPage}
        disabled={page === 1}
      >
        Prev Page
      </button>
      <button
        className="float-right text-teal-600"
        onClick={nextPage}
        disabled={!allPosts.length}
      >
        Next Page
      </button>
    </article>
  );
};

export default PostPage;

型
这篇文章显示正确，这里是示例页面-
x1c 0d1x的数据

**但是，上一个和下一个按钮不工作。**我想从JSON文件中获取下一篇/上一篇文章的URL并获取帖子。

如果它击中结束（又名没有以前或下一篇文章），我希望他们消失或灰色

更新例如，我在Detroit页面，URL是myblog.com/detroit。因此，代码将导入markdown/deploy页面。当我单击Next时，我希望获得postID = landing，以便代码将显示markdown/兰辛等。如果它到达数组的末尾，它将变灰。

的
任何帮助都将受到高度赞赏，并提前表示感谢。