Reactは反応ルータをインストールしましたが、レンダリングするページを取得できません

Question

反応ルータをインストールしましたが、メインページを表示しようとしています。

これは、現在のindex.js

import React, { Component, PropTypes } from 'react'; 
import { Router, Route } from 'react-router'; 

import Layout from './components/Layout'; 
import NewsComponent from './components/NewsComponent'; 

<Router> 
    <div> 
    <Route exact path="/" component={Layout} /> 
    <Route path="/news" component={NewsComponent} /> 
    </div> 
</Router> 

const app = document.getElementById('app') 

ReactDOM.render(
    <Router history={hashHistory}> 
    <Route path="/" component={Layout} /> 
    </Router>, app); 

レイアウトコンポーネントは、ページのレイアウトが含まれています。

私は行方不明ですか？

私はこれを間違っていますか？

Answer 1

あなたが紛失している参考文献がいくつかありますが、この例のように省略した場合、または実際にそれらを紛失している場合はわかりません。

import React from 'react'; 
import ReactDOM from 'react-dom'; //Missing in your example 
import { 
    Router, 
    Route, 
    browserHistory //Missing in your example 
    } from 'react-router'; 
import Layout from './components/Layout'; 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path="/" component={Layout} /> 
    </Router>, 
    document.getElementById('root') 
) 

次に、あなたのコンポーネントで、あなたも歴史をナビゲートすることができます：この試してみてください、あなたのコードを変更するだけでなく

import { hashHistory } from 'react-router' 

//Dont forget to bind this in the constructor 
yourMethod (someParams) { 
    hashHistory.push(someUrl) 
} 

Answer 2

明示的にReactDOMをインポートしてください（ 'ReactionDOM'からReactDOMをインポートしてください）。 Reactをインポートすると自動的には含まれません。

Answer 3

を[欠落している輸入品など]、あなたは、特に言及したいと思います使用している反応ルータのバージョンです。

NPM削除反応し、ルータ

その後：

NPMインストール--save react-router@3.0.0

リアクト-ルータあなたはNPM

てみてくださいを使用していると仮定すると、デフォルトでインストールされるV4は、リアルーターの完全な再構成であり、以前のバージョンのリアルーターで作成されたコードと互換性がありません。

---

しばらくしてReactを使用していない場合は、create-react-appを使用することをおすすめします。そこから起動すると、非常に簡単になります。

https://github.com/facebookincubator/create-react-app