リアクションルータを入れ子にしたコンポーネント

Question

私はオンラインのリアクションチュートリアルに従っています。このチュートリアルでは、React Router 3をReact Router（とreact-router-dom）をダウンロードしたときに使用していました。チュートリアルのコードは次のようになります。

import React from "react"; 
import {render} from "react-dom"; 
import {Router, Route, browserHistory} from 'react-router' 

import {Root} from "./components/Root"; 
import {Home} from "./components/Home"; 
import {User} from "./components/User"; 

class App extends React.Component { 
    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path={"/"} component={Root}> 
        <Route path={"user"} component={User}/> 
        <Route path={"home"} component={Home}/> 
       </Route> 
      </Router> 
     ); 
    } 
} 

render(<App />, window.document.getElementById('app')); 

私はこのようなルータ4に反応して動作するようにコードを書き換えるしようとしている：

import React from "react"; 
import {render} from "react-dom"; 
import {Switch, BrowserRouter, Route} from 'react-router-dom' 

import {Root} from "./components/Root"; 
import {Home} from "./components/Home"; 
import {User} from "./components/User"; 

class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <Switch> 
        <Route path="/" component={Root}> 
         <Route path="/user" component={User}/> 
         <Route path="/home" component={Home}/> 
        </Route> 
       </Switch> 
      </BrowserRouter> 
     ); 
    } 
} 

render(<App />, window.document.getElementById('app')); 

これは私にエラーを与える：

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

私はラップ試してみました子コンポーネントは<Switch>と<Root>となりましたが、動作しませんでした。どのように子コンポーネントをラップする必要がありますか？

Answer 1

リアクタ・ルータ4では、ルートをもう一度ネストしません。あなたのケースでは何を行うことができ、このように、あなたの子コンポーネントであなたのルートを置くことです：

class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <Route path="/" component={Root} /> 
      </BrowserRouter> 
     ); 
    } 
} 

class Root extends React.Component { 
    render() { 
     return (
      <div> 
       <Route path="/user" component={User}/> 
       <Route path="/home" component={Home}/> 
      </div> 
     ); 
    } 
} 

それが唯一の最初の子のルートと一致しますよう。また、私は、あなたがここにSwitchを使用する必要はないと思いますそれはあなたの場合に必要ではないようです。