如何接收博客文章数据

Question

我从我的“后端 - 无头 CMS”接收所有博客文章 - 所有数据都是正确的，但是当我点击特定博客文章时，什么都没有发生。

每篇博文都有自己所属的类别。这就是我获取它们的方式。

const [doc, setDocData] = useState(null);
const [categoryOne, setCategoryOne] = useState([]);
const [categoryTwo, setCategoryTwo] = useState([]);

useEffect(() => {
        const fetchData = async () => {
            const result = await client.query(
                Prismic.Predicates.at('document.type', 'post'),
                { pageSize: 100 }
            );
            if (result) {
                const oneArr = [];
                const twoArr = [];
                result.results.forEach((post) => {
                    switch (post.data.category[0].text) {
                        case 'CategoryOne':
                            oneArr.push(post);
                            break;
                        case 'CategoryTwo':
                            twoArr.push(post);
                            break;
                        default:
                            console.warn('Missing blog post category.');
                    }
                });
                setCategoryOne(oneArr);
                setCategoryTwo(twoArr);
                return setDocData(result);
            } else {
                console.warn(
                    'Not found'
                );
            }
        };
        fetchData();
    }, []);

并在前端显示数据：

        <h1>{post.data.title[0].text}</h1>
        <image src={post.data.image.url} />
        <Link to={'blog/' + post.slugs[0]}>BUTTON </Link>

当我点击Link 时，网址会更改为博客文章的名称，这是正确的，但页面内容仍然相同 - 它应该更改为该特定文章的内容。

使用 React 路由器，我正在做这样的事情：

 <Route path={baseRouteUrl + 'blog/:slug'}
        component={(props) => <Post />}
 ></Route>

如何在点击链接后重定向到正确的帖子内容？

Answer 1

您应该有 2 条带有道具 exact 的路线，如下所示：

<Route exact path={"/blog"} component={Post}></Route>;

<Route exact path={"/blog/:slug"} component={PostDetail}></Route>;