Why is profile content displayed instead of post content on React PostPage component?

Question

I'm encountering an issue with my React application where the content displayed on the PostPage component is that of a user profile instead of the intended post content. Here's a simplified version of my PostPage component

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;

my routes:

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

Despite setting up the SinglePostPage component correctly within the PostPage, when I navigate to the PostPage, I see content from the user profile instead of the post content.

I've ensured that:

The route /:postpage is correctly defined to render the PostPage component. The SinglePostPage component is structured to display post content. There are no apparent errors or warnings in the browser console. Could anyone provide insight into why profile content might be displayed instead of post content on the PostPage component? Any suggestions for troubleshooting or identifying the root cause of this issue would be greatly appreciated.

link is correct but page content is wrong

Answer 1

path="/:profile" has the same specificity as path="/:postpage", so the first route encountered when matching routes to the current URL path is the one that is rendered.

Based on the URL in the screenshot it looks like you are navigating to the string literal "/:profile", so I suspect you meant to render a route on path="/profile" specifically, and that the post page on path="/:postpage" is the dynamic route.

Update the profile route to path="/profile".

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

Ensure you are linking to the correct profile page path now.

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