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

您的布局需要一个组件或指令来了解如何渲染子项。

否则路由器不知道儿童路线需要出现在哪里。子组件作为名为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中嵌套路由（尝试在组件中包装路由）

2 个答案: