简单的反应路由器不工作

Question

我这辈子都做不到让一个简单的反应路由器工作！它显示第一页，但是当我单击 link 时，除了将 url 更改为 /home 之外，它什么也没做。它一直显示 "app"。为什么 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')  
)

简单的反应路由器不工作

Simple React router not working

react-router