React Router v4のネストされたコンポーネント

Question

React Routerを使用して簡単な天気予報アプリを構築したいと思います。これは私のコードです：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom'; 
var Main = require('Main'); 
var Weather = require('Weather'); 
var About = require('About'); 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Main}> 
      <Route path="/Weather" component={Weather} /> 
      <Route path="/About" component={About} /> 
     </Route> 
    </Router>, 
    document.getElementById('app') 
); 

私は上記のコードをしようとすると、私が言う警告を得る：

You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

とするとき、私はこれに私のコードを変更する：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter as Router, Route, IndexRoute, hashHistory} from 'react-router-dom'; 
var Main = require('Main'); 
var Weather = require('Weather'); 
var About = require('About'); 

ReactDOM.render(
    <Router history={hashHistory}> 
     <Route path="/" component={Main} /> 
     <Route path="/Weather" component={Weather} /> 
     <Route path="/About" component={About} /> 
    </Router>, 
    document.getElementById('app') 
); 

A <Router> may have only one child elementというエラーが表示されます。

この問題を解決するにはどうすればよいですか？

Answer 1

ラップすべてのルートを次のようにすべてのあなたのルートを入れ、このような：

ReactDOM.render(
    <Router history={hashHistory}> 
     <div> 
      <Route path="/" component={Main} /> 
      <Route path="/Weather" component={Weather} /> 
      <Route path="/About" component={About} /> 
     </div> 
    </Router>, 
    document.getElementById('app') 
); 

または使用Switch：

ReactDOM.render(
    <Router history={hashHistory}> 
     <Switch> 
      <Route path="/" component={Main} /> 
      <Route path="/Weather" component={Weather} /> 
      <Route path="/About" component={About} /> 
     </Switch> 
    </Router>, 
    document.getElementById('app') 
); 

Answer 2

あなたは、ルータ内部の例のdivタグのために置くことで第二の問題は、唯一の子要素 を持つように修正することができますし、divで

ReactDOM.render(
    <Router history={hashHistory}> 
     <div> 
     <Route path="/" component={Main} /> 
     <Route path="/Weather" component={Weather} /> 
     <Route path="/About" component={About} /> 
     </div> 
    </Router>, 
    document.getElementById('app') 
);