Маршрутизатор Simple React не работает

Question

Не могу на всю жизнь получить простой реактивный маршрутизатор! Он отображает первую страницу, но когда я нажимаю ссылку, она ничего не делает, кроме изменения URL-адреса в/home. Он продолжает показывать «приложение». Почему домашний компонент не загружается ???

Простой код:

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

class App extends React.Component { 
    render() { 
     return (
      <div><Link to="/home">app</Link></div> 
     ); 
    } 
}  

class Home extends React.Component { 
    render() { 
    return (
     <div>Honey, I'm home!!!</div> 
    ); 
    } 
}  

render(
    <Router> 
     <Route path="/" component={App}> 
      <Route path="home" component={Home}/> 
     </Route> 
    </Router>, 
    document.getElementById('tempoot') 
) 

Answer 1

Потому что вы не сказали это, чтобы сделать Home в любом месте. Вам нужно сделать что-то вроде (основная вещь, которую вам не хватает - {this.props.children}):

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

class App extends React.Component { 
    render() { 
     return (
      <div> 
      <div className="nav"> 
       <Link to="/home">app</Link> 
      </div> 
      <div className="content"> 
       // THIS IS THE CORE LINE YOU ARE MISSING 
       {this.props.children || "No one is home :("} 
      </div> 
      </div> 
     ); 
    } 
}  

class Home extends React.Component { 
    render() { 
    return (
     <div>Honey, I'm home!!!</div> 
    ); 
    } 
}  

render(
    <Router> 
     <Route path="/" component={App}> 
      <Route path="home" component={Home}/> 
     </Route> 
    </Router>, 
    document.getElementById('tempoot') 
)