此篇 用来记录一个壁纸小应用网站中的某些功能模块开发思路. 如果能够帮助到您, 非常荣幸. 同时也为了方便自己梳理一下某个功能实现的思路. 方便自己日后学习.
需求
在壁纸详细页面的右上方显示的是该图片的发布者的基本信息(头像, 昵称, 个人简介), 需要实现的需求是点击用户头像, 跳转到他的个人中心页面.
分析
点击头像之后,调用react-router-dom 提供useNavigate钩子 进行路由跳转到个人中心页面, 跳转的时候我们需要将该用户(也就是该作品的发布者的id)带过去,那我们就可以在个人中心页面拿到这个id, 然后我们配合后端的接口,使用这个id进行用户信息接口的请求, 拿到数据,渲染页面.
我们这里需要动态路由, 因为不用 用户中心基本都是一个样子, 我们可以使用一个页面, 而页面内容的展示取决于用户的id, 因为里面的内容都是通过用户id 进行后端接口调用, 返回用户的信息的.
操作
所以路由配置是这样
js
{ path: "/user/:id", element: <Self /> },
在壁纸详细页面,我们点击头像的时候, 使用react-router-dom 提供useNavigate钩子 进行路由跳转
- 壁纸信息都保存在
picDetail中, 也包含了该壁纸的发布人的id(author),这个id就是我们需要的. - 当前壁纸的作者的信息保存
image_creator中. - 然后使用
navigate跳转到中心页
js
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
jsx
import { useParams } from "react-router-dom"; export default function Self() { // 获取路由参数 const { id } = useParams(); ...... }
然后对于获取用户的信息, 获取用户上传的壁纸, 获取用户喜欢的壁纸, 获取用户收藏的壁纸, 都可以通过这个id来进行获取.
下面渲染模板就不多说了.
jsx
// 获取用户信息 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, 那么就说明当前中心页正好是当前用户的中心页,那么就进行展示
- 反之亦然.
jsx
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 钩子函数获取路由参数。以及使用条件判断&&通过条件渲染来实现仅在当前用户中心页面显示编辑按钮的功能.
