React表格添加user.id跳转链接致格式错乱的解决方法

HTML表格有严格的结构规范：<tbody>的直接子元素只能是<tr>标签。你当前用<LinkToUser>（本质是<a>标签）包裹<tr>，相当于在<tbody>中插入了非法的<a>元素，浏览器无法正确解析表格布局，最终导致格式错乱。

方案1：用绝对定位让Link覆盖整行（推荐整行跳转场景） #

调整样式组件，让<LinkToUser>作为<tr>的内部元素，通过绝对定位覆盖整个行区域，既符合HTML结构，又实现整行可点击：

修改样式代码 #

import styled from 'styled-components'
import { Link } from 'react-router-dom'

export const LinkToUser = styled(Link)`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* 可选：移除链接默认样式，保持表格视觉统一 */
  text-decoration: none;
  color: inherit;
`

export const TR = styled.tr`
  position: relative;
  /* 可选：添加鼠标悬停效果，提示可点击 */
  &:hover {
    background-color: #f5f5f5;
  }
`

// 其他样式组件保持不变
export const StyledTable = styled.table``;
export const THead = styled.thead``;
export const TBody = styled.tbody``;
export const TH = styled.th``;
export const TD = styled.td``;

修改JSX结构 #

<StyledTable>
    <THead>
        <TR>
            <TH>{copy.tableHeaderA}</TH>
            <TH>{copy.tableHeaderB}</TH>
            <TH>{copy.tableHeaderC}</TH>
        </TR>
    </THead>
    <TBody>
        {fetchedUsersData?.map((user: Users) => (
            <TR key={user.id}>
                <LinkToUser to={`/users/${user.id}`} />
                <TD>
                    <p>{user.username}</p>
                </TD>
                <TD>
                    <p>{user.name}</p>
                </TD>
                <TD>
                    <p>{user.company.name}</p>
                </TD>
            </TR>
        ))}
    </TBody>
</StyledTable>

方案2：通过点击事件触发路由跳转 #

利用react-router-dom的useNavigate钩子，给<tr>绑定点击事件实现跳转，完全遵循表格结构：

修改组件代码 #

import { useNavigate } from 'react-router-dom';
// 导入其他样式组件

const YourComponent = () => {
    const navigate = useNavigate();
    // 其他业务逻辑：获取fetchedUsersData、copy等

    return (
        <StyledTable>
            <THead>
                <TR>
                    <TH>{copy.tableHeaderA}</TH>
                    <TH>{copy.tableHeaderB}</TH>
                    <TH>{copy.tableHeaderC}</TH>
                </TR>
            </THead>
            <TBody>
                {fetchedUsersData?.map((user: Users) => (
                    <TR 
                        key={user.id}
                        onClick={() => navigate(`/users/${user.id}`)}
                        style={{ cursor: 'pointer' }}
                    >
                        <TD>
                            <p>{user.username}</p>
                        </TD>
                        <TD>
                            <p>{user.name}</p>
                        </TD>
                        <TD>
                            <p>{user.company.name}</p>
                        </TD>
                    </TR>
                ))}
            </TBody>
        </StyledTable>
    )
}

注意：如果<tr>内部有独立的可点击元素（如按钮、其他链接），需要在这些元素上添加onClick={(e) => e.stopPropagation()}阻止事件冒泡，避免误触发整行跳转。

方案3：给每个单元格内容包裹Link #

如果不需要整行跳转，仅单元格内容可点击，可以直接在每个<TD>内部使用<LinkToUser>：

<StyledTable>
    <THead>
        <TR>
            <TH>{copy.tableHeaderA}</TH>
            <TH>{copy.tableHeaderB}</TH>
            <TH>{copy.tableHeaderC}</TH>
        </TR>
    </THead>
    <TBody>
        {fetchedUsersData?.map((user: Users) => (
            <TR key={user.id}>
                <TD>
                    <LinkToUser to={`/users/${user.id}`}>
                        <p>{user.username}</p>
                    </LinkToUser>
                </TD>
                <TD>
                    <LinkToUser to={`/users/${user.id}`}>
                        <p>{user.name}</p>
                    </LinkToUser>
                </TD>
                <TD>
                    <LinkToUser to={`/users/${user.id}`}>
                        <p>{user.company.name}</p>
                    </LinkToUser>
                </TD>
            </TR>
        ))}
    </TBody>
</StyledTable>

这种方式结构合法，但点击区域仅为单元格内的文本区域，而非整行。

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