Reactjs 反应路由器未在地平线上渲染我的路线

我正在使用Horizon开发一个简单的web应用程序，并通过React了解更多有关web设计的信息

由于某些原因，我的路由器不会路由到不同的子目录。例如，当我访问localhost:8181/时，我会看到我的布局页面，但当我访问localhost:8181/主页时，我会看到（显示在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>
     )
}

从“React”导入React
从“react Router”导入{Router，Route，Link，browserHistory，IndexRoute，IndexRedirect}
//路线：
从“./components/MainLayout.jsx”导入MainLayout
从“./components/Search.jsx”导入搜索
从“./components/PickFilm.jsx”导入PickFilm
从“./components/Login.jsx”导入登录名
从“./components/Home.jsx”导入Home
导出常量路由=（）=>{
返回(
)
}

这是我的索引代码：

//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'));

从“React”导入React
从“react dom”导入react dom
从“./Routing.jsx”导入{Routing}
从“材质ui/样式/MuiThemeProvider”导入MuiThemeProvider
//路由信息
ReactDOM.render((
)，document.getElementById（'root'）；

以下是我的主页组件：

//组件/Home.jsx

import React, { Component } from 'react'

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

import React，{Component}来自“React”
导出默认类Home extends组件{
render（）{
返回(
你回来了。
)
}
}

以下是我的布局组件：

//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>
          );
     }
}

import React，{Component}来自“React”
从“./Navbar.jsx”导入导航栏
//需要打开水龙头
//http://stackoverflow.com/a/34015469/988941
从“react-tap事件插件”导入injectTapEventPlugin；
injectTapEventPlugin（）；
导出默认类MainLayout扩展组件{
render（）{
返回(
);
}
}

正如我所说，当访问localhost:8181/时，布局将呈现。但是，当访问任何子组件（例如localhost:8181/Home）时，我都会遇到这个错误。我哪里出错了

我正在使用以下软件版本： 巴别塔核心：6.10.4（+react&es2015的插件和预设）， 第1.13.1页， 地平线1.1.3， 材料ui 0.15.2， 反应15.2.1，

---

React router 2.5.2.

您忘记在

主布局的
渲染方法中包含
{this.props.children}
了，所以您的子路由根本没有被渲染。
我已经在
标记的正下方包含了
{this.props.children}
，并且没有任何更改。（这是我应该放的地方吗？）作为一个对反应非常陌生的人，我很难找到足够容易访问的文档来理解这应该如何工作或不应该如何工作。因为错误是“dist\Home not found”，并且由于dist是.html和package.js文件所在的文件，而不是我的src/components所在的文件，因此我认为Horizon正在同一文件夹中寻找另一个名为“Home”的html页面。它们实际上相当不错。是的，这对孩子来说是一个正确的位置，同时将您的登录路径放在根路径下（path=“/”），并去掉除根路径之外的所有路径中的前导“/”（即使在做了这些建议的更改之后，我仍然会遇到错误！我肯定会阅读更多文档并尝试将其缩小一点。或者答案是我需要使用
hashHistory
，而不是
browserHistory
，然后使用像
localhost:8181/#/login
而不是
localhost:8181/login
。不确定原始代码为什么不起作用（可能是与Horizon的兼容性问题），但更改为
hashHistory
解决了所有问题。