在React Router 4中嵌套路由(尝试在组件中包装路由)

时间:2017-12-12 16:31:10

标签: reactjs react-router-dom

我正在尝试包装我的路线,以便我可以在每条路线上渲染某些内容,例如标题或任何静态内容。我在这里看过这篇文章: 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;

2 个答案:

答案 0 :(得分: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但是如果你使用应该这样做的裸路由器。

答案 1 :(得分:1)

您是否尝试将{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;