[英]React Router v6 render component on same page
I'm trying to change some "state varibale" managed component rendering into react-routing.I am using react-router 6.3.我正在尝试将一些“状态可变”托管组件渲染更改为反应路由。我正在使用 react-router 6.3。 This is the App.js
这是 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?我的目标是在帖子下呈现评论,我之前用本地 state 和 setState 做到了,但是有没有办法用路由来做到这一点? 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!当我点击评论时,我可以看到 url 的变化,我尝试了“navigate(
/${type}
)”,但甚至 url 也没有改变,所以我使用了“navigate(-1)”,但是 Comments 组件没有使成为! Thanks in Advance!提前致谢!
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在您当前的方法中,您需要导航到/type/comments,但它应该只是/type
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.