React Router-嵌套组件不会渲染

Question

我有一个使用create-react-app的标准react组件。 我正在尝试使用Link渲染不同的组件。

这是我的App.js ：

import React, { Component } from 'react';
import { Router, Route, browserHistory } from 'react-router'
import Header from './Header';
import One from './One';
import Two from './Two';
import Three from './Three';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="App">
        <Router history={browserHistory} >
          <Route component={Header} path="/" >
            <Route component={One} path="one" name="One" />
            <Route component={Two} path="two" name="Two" />
            <Route component={Three} path="three" name="Three" />
          </Route>
        </Router>
      </div>
    );
  }
}

export default App;

这是Header.js ：

import React, { Component } from 'react';
import { Link } from 'react-router'
import './App.css';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };

  }

  render() {
    return (
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/one">One</Link></li>
        <li><Link to="/two">Two</Link></li>
        <li><Link to="/three">Three</Link></li>
      </ul>
    );
  }
}

export default Header;

这是One.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };

  }

  render() {
    return (
      <h1>One</h1>
    );
  }
}

export default App;

我单击其中一个链接，地址栏会更改，但嵌套路线内部不会呈现任何组件。 我可以删除嵌套：

<Router history={browserHistory} >
  <Route component={Header} path="/" />
  <Route component={One} path="one" name="One" />
  <Route component={Two} path="two" name="Two" />
  <Route component={Three} path="three" name="Three" />
</Router>

这将渲染组件，但不再渲染标题。

我想念什么？

Answer 1

您在Header组件中忘记了这一部分：

this.props.children

您需要定义要render子组件的位置，使用以下方法：

render() {
    return (
     <div>
        <ul>
           <li><Link to="/">Home</Link></li>
           <li><Link to="/one">One</Link></li>
           <li><Link to="/two">Two</Link></li>
           <li><Link to="/three">Three</Link></li>
        </ul>
        {this.props.children}
      </div>
    );
  }