1

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

由于某种原因，我的路由器不会路由到各种子目录。例如，当我访问 localhost:8181/ 时，我得到了我的布局页面，但是当我访问 localhost:8181/Home 时，我得到（显示在 Firefox 的网页中）“找不到文件“dist\Home”。”

我还在 Firefox 控制台中获得了这段代码：

未声明纯文本文档的字符编码。如果文档包含 US-ASCII 范围之外的字符，则文档将在某些浏览器配置中呈现乱码。文件的字符编码需要在传输协议中声明或文件需要使用字节顺序标记作为编码签名。

这是我的路由器代码：

//路由.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>
     )
}

这是我的索引代码：

//索引.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（+ 用于 react 和 es2015 的插件和预设）、webpack 1.13.1、Horizo​​n 1.1.3、material-ui 0.15.2、React 15.2.1、React-路由器 2.5.2。

4

1 回答 1

3

您忘记包含{this.props.children}在render方法中，MainLayout因此您的子路由根本不会被渲染。

于 2016-07-19T15:18:24.497 回答