反応ルーティング - レンダリングエラー（シングルページアプリケーション）

Question

こんにちは私は反応を覚えていて、SPAを作成しようとしていますが、内部ページは表示されません。

がのみレンダリングされ、それは私が

<Route path="/about" component={About}/> 
<Route path="about" component={About}/> 

のようなルートパスの複数の組み合わせを試してみました&正確な問題に

を見つけることができません

のような内部コンポーネントをレンダリングしていません

私の完全なコード

import React, { Component } from 'react'; 
import {render} from 'react-dom'; 
// import { Router, Route, Link } from 'react-router'; 
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'; 
import About from './About'; 
import Home from './Home'; 
import Repos from './Repos'; 
import AboutChild from './AboutChild'; 

class App extends Component { 
    constructor() { 
     super(...arguments); 
    } 
    render(){ 
     return (
      <div> 
       <menu> 
        <ul> 
         <li><Link to="/">Home</Link></li> 
         <li><Link to="/about">About</Link></li> 
         <li><Link to="/repos">Repos</Link></li> 
        </ul> 
       </menu> 
      </div>    
     ); 
    } 
} 


render((<Router> 
      <App> 
       <Route exact path="/" component={Home} /> 
       <Route path="/about" component={About}/> 
       <Route path="/repos" component={Repos}/> 
      </App> 
</Router>), document.getElementById('root')); 

package.jsonからのコンポーネントのバージョン

"dependencies": { 
    "react": "^15.0.0", 
    "react-dom": "^15.0.0", 
    "react-router": "^4.1.1", 
    "react-router-dom": "^4.1.1" 
    } 

Answer 1

あなたは子供の小道具を返す必要がレンダリングでアプリのコンポーネントで。試してみてください

render(){ 
    return (
     <div> 
      <menu> 
       <ul> 
        <li><Link to="/">Home</Link></li> 
        <li><Link to="/about">About</Link></li> 
        <li><Link to="/repos">Repos</Link></li> 
       </ul> 
      </menu> 
      {this.props.children} 
     </div>    
    ); 
} 

コンストラクタは、この例では使用しないため、削除することもできます。

Answer 2

はあなたのコンストラクタを修正：

constructor(props) { 
    super(props); 
}