Question

我正在使用Horizon和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， Horizon 1.1.3， material-ui 0.15.2，反应15.2.1， React-router 2.5.2。

Answer 1

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

React Router不在Horizon中渲染我的路由

1 个答案:

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

1 个答案:

React Router不在Horizon中渲染我的路由