能否为按钮传递Props？如何通过跳转按钮向路由组件传参？

首先看你当前的实现，已经通过URL参数传递了两个用户的ID，但如果要传递完整的currentUserProfile和selectedUserProfile对象，有两种常用方案，我给你拆解一下：

方案1：通过路由参数获取ID，再获取完整Profile对象 #

你现在的路由配置和Button跳转代码是可行的，只是需要在PrivateMessages组件里根据URL参数的ID，去获取对应的完整Profile对象。

步骤1：在PrivateMessages组件中获取路由参数 #

如果你用的是React Router v5，可以用useParams钩子（类组件则用props.match.params）：

import { useParams } from 'react-router-dom';

function PrivateMessages() {
  const { currentUser, currentProfile } = useParams();
  // 这里currentUser对应currentUserProfile.id，currentProfile对应selectedUserProfile.id
  
  // 接下来根据ID从全局状态（比如Context/Redux）或API请求获取完整对象
  // 假设你有全局用户上下文可以获取：
  const currentUserProfile = useContext(UserContext).users.find(user => user.id === currentUser);
  const selectedUserProfile = useContext(UserContext).users.find(user => user.id === currentProfile);
  
  // 之后就能正常使用这两个对象了
  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
}

为什么选这种方式？ #

URL参数适合传递标识性信息（比如ID），页面刷新后参数不会丢失，也符合路由语义化的原则，是更稳妥的做法。

方案2：通过Link的state传递完整对象 #

如果你不想通过ID二次获取，想直接把完整Profile对象传递给目标组件，可以利用React Router的state属性：

步骤1：修改Button的to属性 #

把to改成包含pathname和state的对象：

<Button 
  content='Private messages' 
  color='green' 
  as={Link} 
  to={{
    pathname: `/messages/${currentUserProfile.id}/${selectedUserProfile.id}`,
    state: {
      currentUserProfile,
      selectedUserProfile
    }
  }} 
/>

步骤2：在PrivateMessages组件中获取state #

用useLocation钩子（React Router v5/v6都支持）：

import { useLocation, useParams } from 'react-router-dom';

function PrivateMessages() {
  const location = useLocation();
  let { currentUserProfile, selectedUserProfile } = location.state || {};
  
  // 重要提醒：页面刷新后state会丢失，所以必须用URL参数做降级处理
  if (!currentUserProfile || !selectedUserProfile) {
    const { currentUser, currentProfile } = useParams();
    // 这里补充根据ID获取完整对象的逻辑，和方案1一致
  }
  
  return (
    <div>
      {/* 使用传递过来的Profile对象 */}
    </div>
  );
}

注意事项 #

• state存储在内存中，页面刷新后会消失，所以必须搭配URL参数做降级，避免组件出错。
• 如果Profile对象体积较大，不建议用这种方式，会增加内存占用，还是用ID获取更合理。

额外优化：修正路由参数命名 #

你的路由配置是/messages/:currentUser/:currentProfile，但第二个参数对应selectedUserProfile.id，命名容易混淆，建议改成更清晰的命名：

<Route path='/messages/:currentUserId/:selectedUserId' component={PrivateMessages} />

这样在组件里获取参数时更直观，也能避免和变量名冲突。

内容的提问来源于stack exchange，提问作者Rodrigo Assis Neves