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

Question

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

我尝试像它们在那里那样包装我的路线，但现在唯一显示的是包装组件，children 节目的 none。

所以唯一显示的是 / 和 /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

您的布局需要一个组件或指令来了解在何处呈现子项。

否则路由器将不知道子路由需要出现在哪里。子组件作为称为 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 但是，如果您使用裸路由器，则应该这样做。

Answer 2

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

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;

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

Nesting Routes in React Router 4 (Tried wrapping routes in component)

reactjs

react-router-dom