javascript - 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>

这将渲染组件但不再渲染 Header。

我错过了什么？

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>
    );
  }