Ошибка корневой маршрутизации по реактору

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

Предположительно это происходит потому, что вы забыли export свой компонент в menu.jsx.

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

Кроме того, как @ Mayank-шукла указал, вы должны найти узел, где вы хотите, чтобы сделать ваше приложение в 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>

Answer 2

Я думаю, что проблема в вашем компоненте appStart, сначала получите элемент html на document.getElementById(), затем отрисуйте компонент внутри этого. Попробуйте это:

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"/> 
<script src = "bundle.js"/>