React Router不在Horizo​​n中渲染我的路由

Question

我正在使用Horizo​​n和React开发一个简单的Web应用程序，以了解有关网页设计的更多信息。

由于某种原因，我的路由器将不会路由到各个子目录。例如，当我访问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'));

这是Home的组件：

//组件/ Home.jsx

import React, { Component } from 'react'

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

这是布局的组件：

//组件/ 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。我哪里错了？

我正在使用这些软件版本： babel-core：6.10.4（+和＆amp; es2015的插件和预设）， webpack 1.13.1， Horizo​​n 1.1.3， material-ui 0.15.2， 反应15.2.1， React-router 2.5.2。

Answer 1

您忘记在{this.props.children}的{​​{1}}方法中加入render，因此您的子路线根本没有呈现。