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

總結所有的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') 
); 

或者使用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標籤解決第二個問題只有一個子元素 並把所有的航線它作爲如下

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') 
);