报Router must have only one children.错误

[Pentium286]

用的是create-react-app脚手架

router.config.js

import App from '../App';
import App1 from '../App.1';
import App2 from '../App.2';

let routes = [
    { path: '/', component: App, title: '首页' },
    { path: '/App1/', component: App1, title: '页面二' },
    { path: '/App2/', component: App2, title: '页面三' },
];

export default routes;

App.js

import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { HashRouter, Route, Link } from 'react-keeper';
import pageRoutes from './config/router.config';
import './App.scss';

const { Header, Content, Sider } = Layout;

// const routes = [
//   {
//     path: "/sandwiches",
//     component: Sandwiches
//   },
//   {
//     path: "/tacos",
//     component: Tacos,
//     routes: [
//       {
//         path: "/tacos/bus",
//         component: Bus
//       },
//       {
//         path: "/tacos/cart",
//         component: Cart
//       }
//     ]
//   }
// ];

function handleClick(e) {
  console.log('click', e);
}

function RouteWithSubRoutes(route) {
  return (
    <Route
      cache
      path={route.path}
      render={props => (
        <route.component {...props} routes={route.routes} />
      )}
    />
  )
}

class App extends Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  }
  render() {
    return (
      <Layout>
        <HashRouter>
          <Sider
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <div className="logo" />
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={['0']}
              onClick={handleClick}
            >
              {pageRoutes.map((item, index) => (
                <Menu.Item key={index}>
                  <Icon type="user" />
                  <span><Link to={item.path}>{item.title}</Link></span>
                </Menu.Item>
              ))}
            </Menu>
          </Sider>
          <Layout>
            <Header style={{ background: '#fff', padding: 0 }}>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.toggle}
              />
            </Header>
            <Content style={{
              margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,
            }}
            >
              {pageRoutes.map((item, index) => (
                <RouteWithSubRoutes key={index} {...item} />
              ))}
            </Content>
          </Layout>
        </HashRouter>
      </Layout>
    );
  }
};

export default App;

这样配置以后报 Router must have only one children. 错误

[lanistor]

Router（HashRouter）是一个空组件，使用它内部的第一个子元素来render，把HashRouter里面的内容包裹在一个<div>里面就可以了。

[Pentium286]

路由器（HashRouter）是一个空组件，使用它内部的第一个子元素来渲染，把HashRouter的里面包裹内容在一个<div>里面就可以了。

是path={route.path}问题，这里循环怎么操作？

function RouteWithSubRoutes(route) {
  console.log('route: ', route);
  return (
    <Route
      cache
      path={route.path}
      render={props => (
        <route.component {...props} routes={route.routes} />
      )}
    />
  )
}

现在出现了 When Routecomponent has no component property, it's children must be a single tag (not an array), likediv|view . 报这个错

[Pentium286]

解决了，这样循环

{pageRoutes.map((item, index) => (
                  <Route key={index} cache component={item.component} path={item.path} />
                ))}