React Router not Rendering my Routes in Horizon

Question

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

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

я также получить этот код в консоли 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://stackoverflow.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. Где я иду не так?

Я использую эти версии программного обеспечения: Бабель-ядро: 6.10.4 (+ плагины и пресеты для реагирующих & es2015), WebPack 1.13.1, Horizon 1.1.3, материала-щ 0.15.2 , Реакция 15.2.1, Реактивный маршрутизатор 2.5.2.

Answer 1

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