React Router - 嵌套组件不会渲染

Question

我有一个标准的反应组件create-react-app.我试图使用Links 渲染不同的组件.

这是我的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>
    );
  }