React 上的错误根路由

Question

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

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)

项目结构：

Answer 1

我认为问题出在您的 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 页面中，如下所示：

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

Answer 2

大概是因为你忘记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>

React 上的错误根路由

Error root routing on React

routing

routes

jsx

reactjs