问题是-（试图解决点击文章列表中的一篇文章然后将用户引导到该特定文章进行阅读的问题）需要使用slug从API调用呈现新页面。AllPosts页面列出不同的文章。它需要文章列表中的图像上的可点击链接来引导到具有该文章的OnePost页面，使用来自API的数据。我已经从BlogCard组件开始，其中我使用了一个Link组件，该组件包含文章列表中的Title和Image。Link组件的目的地为{/posts/${slug}}〉。下一部分是尝试管理App.js页面上的路由，或者对于期望的结果是否存在对此的更有效的解决方案（或者如果有人选择了更好的方法来做这件事）。最后，在OnePost页面上（这篇文章就是针对它编写的）我已经开始进行API调用，目的是使它与AllPost组件相同（使用AXIOS与graphQL模式），到目前为止几乎没有成功。OnePost页面将显示文章标题和封面图片。我已经包括了一个沙箱链接跟随。并留下了注解掉的代码，所以它不会被打破。它在哪里它将显示从API数据的所有帖子页面上的文章列表。提前感谢这么多，我希望这一切都是有意义的，任何帮助或方向将不胜感激...............再次感谢-Python🐍🏴‍海盗️😃................沙箱链接-----〉https://codesandbox.io/s/2-1-23-react-slug-link-3ncqli?file=/src/components/BlogCard.js

import React from "react";
import { Link } from "react-router-dom";
import "./styles.css";

const BlogCard = ({ coverPhoto, title }) => {
  return (
    <div className="card">
      <Link to={`/posts/${slug}`}>
      <h2>{title}</h2>
      <img
        src={coverPhoto ? coverPhoto.url : null}
        alt=""
        height={200}
        width={200}
      ></img>
      </Link>
    </div>
  );
};
export default BlogCard;

import React from "react";
import { useQuery } from "react-query";
 import axios from "axios";

const endpoint =
   "";

 const QUERY = `
  {
     posts {
       id
       title
       slug
       coverPhoto {
         id
         url
       }
     }
   }
 `;
 const SLUGLIST = `
   {
     posts {
       slug
     }
   }
 `;

const OnePost = ({ post }) => {
  return (
    <div>
      <h1>One Post Page</h1>
      <img
        src={post.coverPhoto ? post.coverPhoto.url : null}
        alt=""
        height={200}
        width={600}
      ></img>
     <h2>{post.title}</h2>
    </div>
  );
};

export default OnePost;

import React from "react";
import { useQuery } from "react-query";
import axios from "axios";
import BlogCard from "../../components/BlogCard";

const endpoint =
  "";

const QUERY = `
{
  posts {
    id
    title
    slug
    coverPhoto {
      createdBy {
        id
      }
      url
    }
  }
}
`;

const AllPosts = () => {
  const { data, isLoading, error } = useQuery("blog_posts", async () => {
    const response = await axios({
      url: endpoint,
      method: "POST",
      data: {
        query: QUERY
      }
    });
    return response.data.data;
  });

  if (isLoading) return "Loading...";
  if (error) return <pre>{error.message}</pre>;

  return (
    <div>
      <h1>Top Web Development Resources 2023</h1>
      <ul>
        {data.posts.map((post) => (
          <BlogCard
            title={post.title}
            key={post.id}
            coverPhoto={post.coverPhoto}
          />
        ))}
      </ul>
    </div>
  );
};

export default AllPosts;

import React from "react";
import { QueryClient, QueryClientProvider } from "react-query";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import AllPosts from "./Pages/AllPosts/AllPosts";
import OnePost from "./Pages/OnePost/OnePost";

const queryClient = new QueryClient();

const App = () => (
  <>
    <Router>
      <Switch>
    <QueryClientProvider client={queryClient}>
      <Route path="/" component={AllPosts} />
          <Route path="/onepost" component={OnePost} />
      <AllPosts />
    </QueryClientProvider>
    </Switch>
    </Router>
  </>
);

export default App;

这两张图片是使用相同数据的帖子列表和单个帖子的示例。