1

私は Horizo​​n と React を使用して単純な Web アプリに取り組んでおり、Web デザインについて詳しく学んでいます。

何らかの理由で、ルーターがさまざまなサブディレクトリにルーティングしません。たとえば、localhost:8181/ にアクセスするとレイアウト ページが表示されますが、localhost:8181/Home にアクセスすると、(Firefox の Web ページに表示される) 「ファイル "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.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}内に含めるのを忘れたため、子ルートはまったくレンダリングされません。renderMainLayout

于 2016-07-19T15:18:24.497 に答える