ネストされたルーティングルートが反応します

Question

私は反応し、各ページのヘッダーコンポーネントを持つことを試みるのが新しいです。私のヘッダーコンポーネントはロードされていますが、子はロードされていません。

Index.js

import React from "react"; 
import {render} from "react-dom"; 
import {BrowserRouter, Route,Switch} 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")); 

Package.json

{ 
    "name": "react-1", 
    "version": "1.0.0", 
    "description": "My first react app", 
    "main": "index.js", 
    "scripts": { 
    "start": "npm run build", 
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot --history-api-fallback", 
    "build-prod": "webpack -p && cp src/index.html dist/index.html" 
    }, 
    "author": "Saurabh", 
    "license": "MIT", 
    "dependencies": { 
    "babel-core": "^6.26.0", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-router": "^4.2.0", 
    "react-router-dom": "^4.2.2" 
    }, 
    "devDependencies": { 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-2": "^6.24.1", 
    "webpack": "^3.5.5", 
    "webpack-dev-server": "^2.7.1" 
    } 
} 

Root.js

import React from "react"; 
import {Header} from "./Header"; 

export class Root extends React.Component { 
    render(){ 
     return (
      <div className="container"> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         <Header /> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         dummy text{this.props.children} 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

Header.js

import React from "react"; 
export const Header =(props) => { 
    return (
     <nav className="navbar navbar-default"> 
      <div className="container"> 
       <div className="navbar-header"> 
        <ul className="nav navbar-nav"> 
         <li><a href="#">Home</a></li> 
         <li><a href="#">User</a></li> 
        </ul> 
       </div>  
      </div> 
     </nav> 
    ); 
}; 

私はダミーのテキストを見ることができますが、/ userまたは/ homeを試しているときに、それぞれのページが読み込まれていません。ページがリフレッシュされます。

Answer 1

ネストされたルートは、react-router v4で動作が異なります。ネストされたルートをRootコンポーネントrenderメソッドに直接移動する必要があります。

Index.js

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

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

class App extends React.Component { 

    render(){ 
     return (
      <BrowserRouter > 
       <Switch> 
        <Route path="/" component={Root} /> 
       </Switch> 
      </BrowserRouter> 
     ) ; 
    } 
} 

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

Root.js

import React from "react"; 
import {Header} from "./Header"; 
import { Route, Switch } from 'react-router-dom'; 

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

export class Root extends React.Component { 
    render(){ 
     return (
      <div className="container"> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         <Header /> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         dummy text{this.props.children} 
        </div> 
       </div> 
       <Switch> 
        <Route path="/user" component={User}/> 
        <Route path="/home" component={Home}/> 
       </Switch> 
      </div> 
     ); 
    } 
} 

それはURLと一致する最初のRouteをレンダリングしますSwitch自分のしているRootコンポーネントにSwitchIndex.jsにおける意志ルート。