React页面无法获取URL参数实现跳转问题求助

核心问题 #

问题出在Sidebar组件的跳转逻辑：你写的跳转路径是/profile/:id，这里的:id是React Router的路由参数占位符，但你没有将其替换为当前用户的真实ID值，导致跳转后URL保留了占位符字符串，而非实际用户ID。

解决方案 #

1. 获取当前用户的ID

首先需要拿到当前登录用户的ID，常见实现方式：

• 如果登录后将用户ID存在localStorage，直接读取：

  const userId = localStorage.getItem('userId');
  

• 如果使用React Context、Redux等状态管理工具，从对应状态容器中获取用户ID。

2. 修改跳转逻辑

将路径中的占位符:id替换为真实的用户ID，同时增加ID存在性判断避免无效跳转：

function Sidebar(){
    let navigate = useNavigate();
    // ...其他代码

    const routeProfile = () =>{
        // 获取当前用户ID，示例用localStorage
        const userId = localStorage.getItem('userId');
        if(userId){
            let path = `/profile/${userId}`;
            navigate(path);
        } else {
            // 未登录时跳转到登录页
            navigate('/login');
        }
    }

    // ...其他代码
}

额外说明 #

你的后端server.js和前端Profile.js逻辑是正常的：手动输入ID能正常获取数据，说明后端接口、Profile组件用useParams获取参数并请求数据的流程没有问题，仅需修复跳转时的参数替换即可。

内容的提问来源于stack exchange，提问作者Chenchen