为什么 React PostPage 组件上显示的是个人资料内容而不是帖子内容？

Question

我的 React 应用程序遇到一个问题，其中 PostPage 组件上显示的内容是用户个人资料的内容，而不是预期的帖子内容。这是我的 PostPage 组件的简化版本

import React from 'react';
import { Box, Container, Flex } from '@chakra-ui/react';
import SinglePostPage from '../../components/SinglePost/SinglePostPage';

const PostPage = () => {
  return (
    <Container maxW="container.lg" h="100vh">
      <Flex h="100%">
      <Box border="1px solid" p={4} flexGrow={1}> {/* Set flexGrow to 1 to take up rest of the screen */}
        {/* Post content */}
        <SinglePostPage />
        </Box>
      </Flex>
    </Container>
  );
};

export default PostPage;

我的路线：

<Route path="/:profile" element={<ProfilePage />} />
          <Route path="/:postpage" element={<PostPage />}/>

尽管在 PostPage 中正确设置了 SinglePostPage 组件，但当我导航到 PostPage 时，我看到的是用户个人资料中的内容，而不是帖子内容。

我已经保证：

正确定义了路由 /:postpage 来渲染 PostPage 组件。 SinglePostPage 组件的结构是为了显示帖子内容。 浏览器控制台中没有明显的错误或警告。 任何人都可以深入了解为什么在 PostPage 组件上显示个人资料内容而不是帖子内容吗？任何有关故障排除或确定此问题根本原因的建议将不胜感激。

Answer 1

path="/:profile"

与

path="/:postpage"

具有相同的特异性，因此将路由匹配到当前 URL 路径时遇到的第一个路由就是渲染的路由。

根据屏幕截图中的 URL，您似乎正在导航到字符串文字

"/:profile"

，因此我怀疑您打算专门在

path="/profile"

上渲染路线，并且

path="/:postpage"

上的帖子页面是动态路线.

将个人资料路线更新为

path="/profile"

。

<Route path="/profile" element={<ProfilePage />} />
<Route path="/:postpage" element={<PostPage />} />

确保您现在链接到正确的个人资料页面路径。

<Link to="/profile">Profile</Link>