Why is my route not working?

Web Development Full-Stack
1

I am doing routing for my react portfolio project and I am stuck on why is one of my routes not working properly.
First I have my routes set up like this:

const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={ <App />}>
    <Route index element={ (
    <>
    <Posts />
    <LoadMoreButton />
    </>
    ) } />
    <Route path='/:key' element={<PostWithComments />} />
    <Route path='/r/:subreddit' element={(
        <>
        <Posts />
        <LoadMoreButton />
        </>
      )} />
  </Route>

The Route in question is this one: <Route path='/:key' element={<PostWithComments />} />
The one below is working fine.
I have my link set up like this:

<Link to={`${props.postData.permalink}`} >

where permalink example is “r/worldnews/comments/112oymx/rworldnews_live_thread_russian_invasion_of/”

Any ideas?