React中使用<Link>组件触发React.Children.only报错的原因及解决

开发者阿泽

2026-5-27

问题分析与解决：React.Children.only 报错处理

嘿，我一眼就揪出问题所在了！你在listPage.js里的Link导入完全搞错了——把BrowserRouter当成Link来用，这就是触发报错的核心原因。

为什么会出现这个错误？

BrowserRouter组件的设计规则是只能接收单个React元素作为子节点，但你把它当成Link组件，在里面包裹了{post.title}（文本节点），这直接违反了它的使用要求，所以React抛出了React.Children.only expected to receive a single React element child错误。而直接显示{post.title}时没用到这个错误的组件，自然就不会报错。

解决步骤

修正Link的导入语句
在listPage.js里，把错误的导入代码：

import { BrowserRouter as Link } from "react-router-dom";

改成正确的写法：

import { Link } from "react-router-dom";

优化路由路径（可选但推荐）
为了避免相对路径可能引发的跳转问题，建议给to属性的路径加上开头的斜杠：
```
<Link to={"/coding-fun/" + post.title}>{post.title}</Link>
```

修改后的完整listPage.js代码

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Listing extends Component {
  constructor(props) {
    super(props);
    this.state = { data: this.props.items };
  }

  render() {
    return (
      <table>
        <tbody>
          {this.state.data.map(post => (
            <tr key={post.id}>
              <td>
                <Link to={"/coding-fun/" + post.title}>{post.title}</Link>
              </td>
              <td>{post.content}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default Listing;