Estoy tratando de cambiar algunos componentes administrados de "estado variable" en el enrutamiento de reacción. Estoy usando el enrutador de reacción 6.3. Esta es la aplicación.js

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

Este es el componente

 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> ); }

Mi objetivo sería mostrar los comentarios debajo de la publicación, lo hice con el estado local y setState antes, pero ¿hay alguna manera de hacerlo con el enrutamiento? Puedo ver el cambio en la url cuando hago clic en un comentario, probé "navegar ( /${type} )" pero ni siquiera la url cambió, así que usé "navegar (-1)" Pero el componente Comentarios no lo hace ¡prestar! ¡Gracias de antemano!