Reactjs React上的根路由错误

未捕获错误：根路由必须呈现单个元素。我不明白这是什么时候发生的。请告诉我，我不明白的是什么

menu.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router'

class Menu extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <Link to="/">Home</Link>
               <Link to="/contacts">Contacts</Link>
               <Link to="/about">About</Link>
            </ul>               
           {this.props.children}
         </div>
      )
   }
}

从“React”导入React；
从“react dom”导入react dom；
从“反应路由器”导入{Link}
类菜单扩展了React.Component{
render（）{
返回(

家
联络
关于

{this.props.children}
)
}
}

关于.jsx（和其他组件）：

从“React”导入React；
导出关于扩展React.Component的默认类{
render（）{
返回(
关于
)
}
}

appStart.js

import React from 'react';
import ReactDOM from 'react-dom';

import Home from './app/templates/home';
import About from './app/templates/about';
import Contacts from './app/templates/contacts';

import Menu from './app/layouts/menu';

import { Route, Router, browserHistory, IndexRoute } from "react-router";

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {Menu}>
         <IndexRoute component = {Home} />
         <Route path = "/home" component = {Home} />
         <Route path = "/about" component = {About} />
         <Route path = "/contacts" component = {Contacts} />
      </Route>
   </Router>

), app)

从“React”导入React；
从“react dom”导入react dom；
从“/app/templates/Home”导入主页；
从“/app/templates/About”导入关于；
从“./app/templates/Contacts”导入联系人；
从“./app/layouts/Menu”导入菜单；
从“react Router”导入{Route，Router，browserHistory，IndexRoute}；
ReactDOM.render((
)，app）

项目结构：

---

我认为问题出在您的

appStart

组件中，首先通过

document.getElementById（）

获取html元素，然后在其中呈现组件。试试这个：

ReactDOM.render((
  <Router history = {browserHistory}>
    <Route path = "/" component = {Menu}>
       <IndexRoute component = {Home} />
       <Route path = "/home" component = {Home} />
       <Route path = "/about" component = {About} />
       <Route path = "/contacts" component = {Contacts} />
    </Route>
  </Router>
), document.getElementById("app"))

ReactDOM.render((
)，document.getElementById（“应用程序”））

定义此id“app”，并在html页面中包含捆绑文件，如下所示：

<div id="app"/>
<script src = "bundle.js"/>

---

我认为问题出在您的

appStart

组件中，首先通过

document.getElementById（）获取html元素，然后在其中呈现组件。试试这个：

ReactDOM.render((
  <Router history = {browserHistory}>
    <Route path = "/" component = {Menu}>
       <IndexRoute component = {Home} />
       <Route path = "/home" component = {Home} />
       <Route path = "/about" component = {About} />
       <Route path = "/contacts" component = {Contacts} />
    </Route>
  </Router>
), document.getElementById("app"))

ReactDOM.render((
)，document.getElementById（“应用程序”））

定义此id“app”，并在html页面中包含捆绑文件，如下所示：

<div id="app"/>
<script src = "bundle.js"/>

可能是因为您忘记了在
菜单.jsx中导出组件

export default class Menu extends React.Component {
    // ... rest of the code

正如@mayank shukla指出的，您应该找到要在DOM中呈现应用程序的节点

ReactDOM.render((
  <Router history = {browserHistory}>
    <Route path = "/" component = {Menu}>
       <IndexRoute component = {Home} />
       <Route path = "/home" component = {Home} />
       <Route path = "/about" component = {About} />
       <Route path = "/contacts" component = {Contacts} />
    </Route>
  </Router>
), document.getElementById("app"));

ReactDOM.render((
)，document.getElementById（“app”）；

假设您的
.html
文件有这样的内容，大概是因为您忘记了在
菜单.jsx中导出组件

export default class Menu extends React.Component {
    // ... rest of the code

正如@mayank shukla指出的，您应该找到要在DOM中呈现应用程序的节点

ReactDOM.render((
  <Router history = {browserHistory}>
    <Route path = "/" component = {Menu}>
       <IndexRoute component = {Home} />
       <Route path = "/home" component = {Home} />
       <Route path = "/about" component = {About} />
       <Route path = "/contacts" component = {Contacts} />
    </Route>
  </Router>
), document.getElementById("app"));

ReactDOM.render((
)，document.getElementById（“app”）；

假设你的
.html
文件有这样的内容
@free sour，big thanx，soone，），document.getElementById（“app”）；=，（app）；-工作，并导出默认值。@free-sour，big-thanx，so-one，），document.getElementById（“app”）；=，（app）；-工作，并导出默认值。