React Router v6 render component on same page

Question

I'm trying to change some "state varibale" managed component rendering into react-routing.I am using react-router 6.3. This is the App.js

function App() {
  return (
    <Router>
      <Header />
      <Selections />
      <Routes>
        <Route path='/:type' element={<PostMain />}>
          <Route path=':comments' index element={<Comments />} />
         </Route>
      </Routes>
    </Router>
  );
}

This is the Component

 const handleLoadComments = () => {
    if (!comments) { 
    dispatch(loadCommentsByPost(props.permalink));
    } else {
      navigate(-1);
      //navigate(`/${type}`)
      //console.log(type);
    }
}
  return (
    <div className="Post">npm 
      <div className='Post-header' >
        <p>Subbreddit: {props.subreddit_name_prefixed}</p>
        <p>{created(props.created_utc)}</p>
      </div>
      <Media post={props} />
      <div className='Post-footer-container' >
        <div className='Post-footer' >
        <div className='Post-footer-votes'>
          <img src={upVote} alt="upvote" />
          <p style={{color: "green"}} > {props.ups} -</p>
          <img src={downVote} alt='downvote' />
          <p style={{color: "red"}} > {props.downs}</p>
        </div>
        <Link to={`${props.id}`} >
        <div className='Post-footer-comments' onClick={handleLoadComments} >
          <input type="image" className='Comments-image' src={commentImg} alt='comment bubble' />
          <p>{props.num_comments}</p>
        </div>
        </Link>
      </div>
        {/* { loading && <div className='Loading-container' ><img src={Loading} alt='loading' className='Comment-loading' /></div>} */}
      </div>
      <Outlet />
        {/* {comments && <Comments comments={comments} />} */}
    </div>
  );
}

My goal would be to render the comments under the post, i did it with local state and setState before but is there a way to do it with routing? I can see the change in the url when i click on a comment, i tried "navigate(/${type})" but not even the url changed so i used "navigate(-1)" But the Comments component doesn't render! Thanks in Advance!

Answer 1

Try to remove the path from the comments route since it's the index it sould be there by default

function App() {
  return (
    <Router>
      <Header />
      <Selections />
      <Routes>
        <Route path='/:type' element={<PostMain />}>
          {/* <Route path=':comments' index element={<Comments />} /> */}
          <Route index element={<Comments />} />
         </Route>
      </Routes>
    </Router>
  );
}

in your current approach you need to navigate to /type/comments, but it should be just /type