React Router не отображает мои маршруты в Horizon

Question

Я работаю над простым веб-приложением с Horizon и React, чтобы узнать больше о веб-дизайне.

По какой-то причине мой маршрутизатор не будет маршрутизировать в различные подкаталоги. Например, я получаю свою страницу Layout, когда захожу на localhost:8181/, но когда я захожу на localhost:8181/Home, я получаю (отображается на веб-странице в Firefox) файл "dist\Home" not found ".

Я также получаю этот код в консоли Firefox:

Кодировка символов в текстовом документе не была объявлена. Документ будет отображаться с искаженным текстом в некоторых конфигурациях браузера, если документ содержит символы вне диапазона US-ASCII. Кодировка символов файла должна быть объявлена ​​в протоколе передачи, или файл должен использовать метку порядка байтов в качестве сигнатуры кодирования.

Вот мой код маршрутизатора:

//Routing.jsx

import React from 'react'
import { Router, Route, Link, browserHistory, IndexRoute, IndexRedirect } from 'react-router'

//Routes:
import MainLayout from './components/MainLayout.jsx'
import Search from './components/Search.jsx'
import PickFilm from './components/PickFilm.jsx'
import Login from './components/Login.jsx'
import Home from './components/Home.jsx'

export const Routing = () => {
    return (
          <Router history={browserHistory}>
            <Route path = "/" component = {MainLayout} >
              <Route path = "/Home" component = {Home} />
              <Route path = "/Search" component = {Search} />
              <Route path = "/PickFilm" component = {PickFilm} />
            </Route>
            <Route path = "/Login" component = {Login} />
          </Router>
     )
}

Вот мой индексный код:

//Index.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { Routing } from './Routing.jsx'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

// Routing Information
ReactDOM.render((
  <MuiThemeProvider>
    <Routing />
  </MuiThemeProvider>
), document.getElementById('root'));

Вот мой компонент для дома:

//components/Home.jsx

import React, { Component } from 'react'

export default class Home extends Component {
     render() {
          return (
               <span>You're home.</span>
          )
     }
}

Вот мой компонент для макета:

//components/MainLayout.jsx

import React, { Component } from 'react'
import Navbar from './Navbar.jsx'

//Needed for onTouchTap
//http://stackru.com/a/34015469/988941
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

export default class MainLayout extends Component {

     render() {
          return(
            <div>
              <Navbar />

            </div>
          );
     }
}

Как я уже сказал, макет будет отображаться при посещении localhost:8181/. Но я получаю эту ошибку при посещении любого из подкомпонентов, например localhost:8181/Home. Куда я иду не так?

Я использую следующие версии программного обеспечения: babel-core: 6.10.4 (+ плагины и пресеты для response & es2015), веб-пакет 1.13.1, Horizon 1.1.3, материал-интерфейс 0.15.2, React 15.2.1, React- роутер 2.5.2.

Answer 1

Вы забыли включить {this.props.children} внутри render метод MainLayout поэтому ваши дочерние маршруты вообще не отображаются.