Javascript 使用React Router链接使整个表行可单击

我还没有反应过来。 我有一个名为Content的组件，它是另两个名为List和Profile的组件的容器

class Content extends Component{
  <HashRouter>
    <Route exact path="/list">
       <List *props are entered here*/>
     </Route>
     <Route exact path="/profile">
        <Profile foo = {this.foo} *props are entered here*/>
     </Route>
  </HashRouter>
}

类内容扩展组件{
}

在列表中，我有一个从该州映射出来的用户表。当我单击链接时，函数foo获取用户id并将其传递给配置文件，列表组件将替换为配置文件组件，显示所选用户配置文件

<table>
 <thead>
  <tr >
    <th>User</th>
    <th>Link to profile</th>
  </tr>
 </thead>

 <tbody>
  {this.state.users.map((user, index) =>
   <tr key={index}>
     <td>{user.name}</td>
     <td><Link to="/profile" onClick={() => this.props.foo(user.id)}</Link></td>
   </tr>
   )}
 </tbody>
</table>

使用者
链接到个人资料
{this.state.users.map（（用户，索引）=>
{user.name}
this.props.foo（user.id）}
)}

现在单击

中的链接显然可以工作，但我想让整行像可单击的

我尝试将onClick函数绑定到

，但我不知道如何使它像

一样，在那里它将组件替换到配置文件中

编辑：根据Jacob Smit的评论，我设法使用withRouter使其正常工作

我在react router dom中加入了withRouter

使用路由器导出默认值（列表）

在

中添加了onClick函数和数据值属性

在clickRow（）函数中

this.props.foo（event.currentTarget.getAttribute（“数据值”）；this.props.history.push（“/profile”）

我没有在

clickRow

中传递

user.id

，因为出于某种奇怪的原因，它会在加载页面时自动触发它，所以我尝试将其删除。尚未调查，但目前将使用此解决方案

将onClick事件置于

在单击中，使用重定向链接到另一个页面，也可能需要传递道具来重定向

handleOnClick=（userid）=>{
返回
}

由于您使用的是类组件，您可以使用

with router

通过道具将

历史记录

推送到您的组件上。然后您可以使用

历史记录。推送（/*URL HERE*/）

要创建应用程序路由。如果使用任何功能组件，可以使用hook

usehistics

而不是使用路由器

HOC。这很有效！谢谢！