React 上的根路由错误答案

【问题标题】：Error root routing on ReactReact 上的根路由错误
【发布时间】：2017-04-25 16:46:54
【问题描述】：

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

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>
      )
   }
}

about.jsx（等组件）：

import React from 'react';

export default class About extends React.Component {
   render() {
      return (
         <div>
            <h1>About...</h1>
         </div>
      )
   }
}

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)

项目结构：

【问题讨论】：

标签： reactjs routing routes jsx

【解决方案1】：

大概是因为你忘了export你的组件在menu.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"));

假设您的 .html 文件有类似 <div id="app"></div> 的内容

【讨论】：

@free-soul, big thanx, so one, ), document.getElementById("app")); = ), 应用程序); - 工作，并导出默认值。

【解决方案2】：

我认为问题出在您的 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"))

定义这个 id "app" 并在你的 html 页面中包含 bundle 文件，像这样：

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

【讨论】：