此篇 用来记录一个壁纸小应用网站中的某些功能模块开发思路. 如果能够帮助到您, 非常荣幸. 同时也为了方便自己梳理一下某个功能实现的思路. 方便自己日后学习.
需求
在壁纸详细页面的右上方显示的是该图片的发布者的基本信息(头像, 昵称, 个人简介), 需要实现的需求是点击用户头像, 跳转到他的个人中心页面.
分析
点击头像之后,调用react-router-dom 提供useNavigate钩子 进行路由跳转到个人中心页面, 跳转的时候我们需要将该用户(也就是该作品的发布者的id)带过去,那我们就可以在个人中心页面拿到这个id, 然后我们配合后端的接口,使用这个id进行用户信息接口的请求, 拿到数据,渲染页面.
我们这里需要动态路由, 因为不用 用户中心基本都是一个样子, 我们可以使用一个页面, 而页面内容的展示取决于用户的id, 因为里面的内容都是通过用户id 进行后端接口调用, 返回用户的信息的.
操作
所以路由配置是这样
代码语言：javascript复制 { path: "/user/:id", element: <Self /> },在壁纸详细页面,我们点击头像的时候, 使用react-router-dom 提供useNavigate钩子 进行路由跳转
- 壁纸信息都保存在
picDetail中, 也包含了该壁纸的发布人的id(author),这个id就是我们需要的. - 当前壁纸的作者的信息保存
image_creator中. - 然后使用
navigate跳转到中心页
const goto_Personal_homepage = (id)=>{
navigate(`/user/${id}`)
}
<Space align="center" >
{/* 发布者头像 */}
<img src={image_creator.user_avatar} alt="发布者头像" className={DetailStyle.publisher} onClick={()=>goto_Personal_homepage(picDetail.author)} />
{/* 发布者名字 */}
<Space align="start" vertical>
<span className={DetailStyle.publisher_name}>{userCurrentInfo.user_nickname}</span>
<span className={DetailStyle.publisher_desc}>{userCurrentInfo.user_description}</span>
</Space>
</Space>在中心页面,使用useParams 钩子函数 拿到动态路由后面的参数, id
import { useParams } from "react-router-dom";
export default function Self() {
// 获取路由参数
const { id } = useParams();
......
}然后对于获取用户的信息, 获取用户上传的壁纸, 获取用户喜欢的壁纸, 获取用户收藏的壁纸, 都可以通过这个id来进行获取.
下面渲染模板就不多说了.
代码语言：javascript复制 // 获取用户信息
get_user_info(id).then((res) => {
console.log(res);
setuserInfoData(res);
});
// 获取我上传的壁纸看列表
const getmyUploadsimageList = async () => {
get_user_images(id)
.then((res) => {
if (res.code == 200) {
console.log(res);
setmyUploadsimageList(res.data);
}
})
.catch((err) => {
console.log(err);
});
};
// 获取我喜欢的图片列表
const getmyLikesimageList = async () => {
const res = await get_user_likes(id);
if (res.code == 200) {
setmyLikesimageList(res.data);
}
};
// 获取我收藏的图片列表
const getmyCollectsimageList = async () => {
const res = await get_user_collects(id);
if (res.code == 200) {
setmyCollectsimageList(res.data);
}
};不过需要提的一点就是
- 如果当前中心页面正好是当前用户的中心页面, 那么就需要在中心页面显示
编辑个人信息的按钮 - 而其他用户的中心页面
不显示.
我这里是通过条件渲染dom 来做的.
- 如果从动态路由获取的id(图片的作者id) == 本地存储的user_id, 那么就说明当前中心页正好是当前用户的中心页,那么就进行展示
- 反之亦然.
export default function Self() {
// 获取路由参数
const { id } = useParams();
const curId = JSON.parse(localStorage.getItem("userInfo")).user_id;
const navigate = useNavigate();
....
return(
<div className={SelfStyle.edit}>
{id == curId && (
<Button
icon={<IconEdit />}
type="tertiary"
theme="light"
style={{ marginRight: 10, color: "white" }}
onClick={showModal}
>
编辑
</Button>
)}
</div>
)
}效果
总结
主要使用了 React Router 提供的动态路由跳转功能，并结合了 useParams 钩子函数获取路由参数。以及使用条件判断&&通过条件渲染来实现仅在当前用户中心页面显示编辑按钮的功能.
