在 React Router 4 中嵌套路由（尝试在组件中包装路由）

Question

我正在尝试包装我的路线，以便我可以在每条路线上呈现一些内容，例如标题或任何静态内容。我在这里看过这篇文章： Nested Routes in React Router v4

我尝试像他们那样包装我的路线，但现在唯一显示的是包装组件，没有孩子显示。

所以唯一显示的是/ 和/dashboard 路线：

Home Component
Dashboard

代码如下：

包装路线：

    <Home>
      <Switch>
        <Route path="/dashboard" component={Layout} />
        <Route component={NotFound} />
      </Switch>
    </Home>

首页组件：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Home component</h2>
        <Link to="/dashboard">Dashboard</Link>
      </div>
    );
  }
}

export default Home;

布局组件：

import React, { Component } from 'react';


class Layout extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Layout Component</h2>
        <h2>Layout Component</h2>
      </div>
    );
  }
}

export default Layout;

Answer 1

您是否尝试将 {this.props.children} 放入您的 Home 组件中？

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class Home extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Home component</h2>
        <Link to="/dashboard">Dashboard</Link>
        {this.props.children}
      </div>
    );
  }
}

export default Home;

Answer 2

您的布局需要一个组件或指令来知道在哪里呈现子级。

否则路由器将不知道子路由需要出现在哪里。子组件作为称为 children 的属性传递给布局。您需要将其添加到您希望它出现的位置：

  {props.children}

喜欢：

import React, { Component } from 'react';


class Layout extends Component {
  constructor(props) {
    super(props);
  }

  static propTypes = {
    children: PropTypes.node.isRequired,
  }

  render() {
    return (
      <div>
        <h2>Layout Component</h2>
        {props.children}
      </div>
    );
  }
}

export default Layout;

我个人更喜欢使用 . react router config 但是如果你使用裸路由器应该这样做。