リアクタに空白のページが表示される

Question

私はリアクタを使い始めようとしています。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import HelloWorld from './pages/HelloWorld'; 
import {Router, Route, IndexRoute, hashHistory,browserHistory} from "react-router"; 
... 
const app = document.getElementById('root') 
ReactDOM.render(<HelloWorld/>, app); 

ここではダミークラスのHelloWorld：この設定のすべてを使用して

import React, { Component } from 'react'; 

class HelloWorld extends Component { 
    render(){ 
     return(<h1> HelloWorld </h1>); 
    } 
} 

export default HelloWorld; 

は罰金を動作します。しかし、ルートを使用すると、空白のページができてしまいます。

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

どこが間違いですか？私はstackoverflowを検索しましたが、答えは適切ではないようです。あなたはV3の方法でV4を使用して使用している

const Routes =() => (
    <Router history = {browserHistory}> 
    <Route path ="/" render={() => (<h1> HelloWorld </h1>) } /> 
    </Router> 
); 
const app = document.getElementById('app') 
ReactDOM.render(<Routes/>, app); 

Answer 1

：私にとっては本当に奇妙

いただきましたが、次のコードはまた、空白のページになりということです。

import {BrowserRouter as Router, Route} from "react-router"; 
import createHistory from "history/createBrowserHistory" // browser history moved into a standalone package since v4. 

Answer 2

[OK]を "1" ソリューションは、次のとおりです：あなたは `Featured`が、あなたのクラスが呼び出されるをエクスポートする

import {BrowserRouter as Router, Route, IndexRoute,hashHistory,browserHistory} from "react-router-dom"; 
... 
const Routes =() => (
    <Router history = {browserHistory}> 
    <Route path ='/' component={ Layout } /> 
    </Router> 
); 

const app = document.getElementById('app') 
ReactDOM.render(<Routes/>, app);