从JSON引入路由组件时遇React报错：对象不能作为React子元素

这个错误我太熟悉了——本质就是React没办法渲染普通的JS对象，当你的代码试图把一个带{contents}键的对象直接丢给React渲染时，它就会懵圈抛出这个错误。咱们一步步拆解问题，搞定它：

核心原因分析 #

看你贴的代码片段，问题出在Router组件的render逻辑里。你应该是在处理菜单数据时，生成了一个包含contents键的对象，然后直接把这个对象当成React子元素返回了，但React只认React元素、字符串、数字这些合法的子节点，普通对象它根本不知道怎么渲染。

具体修复方案 #

咱们需要调整Router组件的逻辑，结合React Router的Route和Link来正确实现菜单导航和路由匹配，同时避免渲染对象的问题：

第一步：先导入必要的Router组件 #

如果还没导入的话，先把Route和Link加进来：

import { Route, Link } from 'react-router-dom';

第二步：重写Router组件的渲染逻辑 #

把原来的错误逻辑换成正确的菜单和路由渲染：

class Router extends Component {
  render() {
    const menuItems = this.props.data.menu;
    return (
      <div className="app-container">
        {/* 渲染导航菜单 */}
        <ul className="nav-menu">
          {menuItems.map(item => (
            <li key={item.id}>
              <Link to={`/${item.text.toLowerCase()}`}>
                {item.text}
              </Link>
            </li>
          ))}
        </ul>

        {/* 渲染路由匹配规则 */}
        {menuItems.map(item => (
          <Route
            key={item.id}
            path={`/${item.text.toLowerCase()}`}
            component={item.component.type}
            exact
          />
        ))}

        {/* 默认路由：打开页面直接显示Dashboard */}
        <Route path="/" component={Dashboard} exact />
      </div>
    );
  }
}

第三步：优化App组件的菜单数据（可选但推荐） #

你原来的menu()方法返回了一个嵌套对象，其实可以简化成直接返回数组，让数据传递更清晰：

menu() {
  return [
    { id: 1, text: "Dashboard", component: Dashboard }, // 注意这里直接传组件类，不是<Dashboard/>实例
    { id: 2, text: "Users", component: Users },
  ];
}

然后在App的render里改成：

<Router data={{ menu: this.menu() }} />

或者更直接点：

<Router menuItems={this.menu()} />

对应的Router组件里就用const menuItems = this.props.menuItems;来获取数据。

关键注意事项 #

1. 不要存组件实例：别把<Dashboard/>这种已经实例化的组件存在数组里，要存组件的类/函数——因为Route的component属性需要接收组件类型，而不是现成的实例，不然会导致不必要的重渲染。
2. 必须加key属性：列表渲染时每个项都要有唯一的key，这里用item.id就刚好合适，这是React的硬性要求。
3. 路径要对应：Link的to属性和Route的path属性要保持一致，这样点击菜单才能正确跳转到对应的组件。

为什么原来的代码会报错？ #

假设你原来的Router组件里写了类似这样的逻辑：

render() {
  let menu = this.props.data.menu;
  let contents = menu.map(item => ({ contents: item.component }));
  return <div>{contents}</div>;
}

这里的contents是一堆{contents: <Dashboard/>}的对象数组，当你把这个数组直接放到JSX里时，React会尝试逐个渲染这些对象，而对象不是合法的React子元素，自然就抛出那个错误了。

只要把逻辑改成直接渲染组件或者通过Route来管理，这个问题就解决啦。

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