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

Question

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并将其传递给Profile，List组件将被Profile组件替换，显示选定的用户配置文件

<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>

现在，单击中的链接显然有效，但我希望使整个行像可单击的

我尝试将onClick函数绑定到，但我不知道如何使它像 那样替换要配置文件的组件

编辑：根据雅各布·斯密特的评论，我设法使用withRouter使其工作

>

我包括来自react-router-dom的withRouter

导出默认wishrouter（列表）

Answer 1

>

将onClick事件置于

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

js lang-js prettyprint-override">handleOnClick = (userid) => {
      return <Redirect
      to={{
        pathname: "/profile",
        foo: userid
        
      }}
    />
    }