Reactjs “this.props.children”还能与react router v4一起使用吗？

下面的内容实际上可以呈现App组件，加上routes指定的一个组件，它将在

App.js

中呈现

this.props.children

。但这是react路由器v4的首选方法还是正确方法

方法1

//在index.js中
ReactDOM.render(
(
),
document.querySelector（“#root”）
);
//在App.js中
导出默认类应用程序扩展组件{
render（）{
返回(
欢迎使用这个很棒的应用程序
{this.props.children}
);
}
}

方法2

//在index.js中（App.js与上面一样）
ReactDOM.render(
(
),
document.querySelector（“#root”）
);

首选哪个取决于您试图实现的目标。我倾向于选择您的方法2，因为它允许您稍后在

应用程序中添加路由组件

组件：

// in App.js
export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to this awesome App</h1>
        <Link to="/">Home</Link>
        {this.props.children}
      </div>
    );
  }
}

//在App.js中
导出默认类应用程序扩展组件{
render（）{
返回(
欢迎使用这个很棒的应用程序
家
{this.props.children}
);
}
}

使用方法1，

应用程序

组件位于

路由器

组件之外，这将不允许您在

应用程序

组件内使用React路由器组件。通常，应用程序中需要路由组件的任何位置都必须是

路由器

组件的子级。在某些情况下，

应用程序

组件可能不应使用路由组件，但如果这是目标，我也会通过添加一些注释来明确说明为什么

应用程序

在

路由器

之外

将React Router v4视为普通的React组件（因为它们是）可能会有所帮助，然后重新阅读React文档，其中详细介绍了如何使用

props.children

。总之，

props.children

是React工作原理的核心部分，也是实现合成的推荐方式（而不是使用继承），因此没有理由避免在React Router V4中使用它“组件是React强大的声明式编程模型的核心。React Router是导航组件的集合，它们以声明方式与应用程序一起组成

// in index.js  (App.js stays the same as above)

ReactDOM.render(
  (
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router>
        <App>
          <Route exact={true} path="/" component={PostsIndex} />
          <Route path="/posts/:id" component={PostsShow} />
        </App>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);

// in App.js
export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to this awesome App</h1>
        <Link to="/">Home</Link>
        {this.props.children}
      </div>
    );
  }
}