`this.props.children`仍然可以与react-router v4一起使用吗？

Question

以下实际上可以呈现App组件，以及路由指定的一个组件，this.props.children将在App.js中呈现。但它是react-router v4的首选或正确方法吗？

方法1

// in index.js

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

// in App.js

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

方法2

// 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')
);

Answer 1

哪个首选取决于您要实现的目标。我倾向于选择方法2 ，因为它允许您稍后在App组件中添加路由组件：

// 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>
    );
  }
}

使用方法1 ，App组件位于Router组件之外，并且不允许您在App内使用React Router组件零件。通常，应用中需要路由组件的任何位置都必须是Router组件的子级。在某些情况下，您的App组件可能不应使用路由组件，但如果这是目标，我还会通过添加一些注释来明确App在Router之外的内容。< / p>

将React Router v4视为正常的React组件（因为它们）可能会有所帮助，然后重新阅读有关Composition vs Inheritance和Children in JSX的React文档，其中涵盖the front page和this answer的使用1}}非常详细。总之，props.children是React如何工作的核心部分，是推荐的实现组合的方式（而不是使用继承），所以没有理由你应该避免在React Router V4中使用它{{3} } states＆＃34;组件是React强大的声明性编程模型的核心。 React Router是一个导航 组件的集合，它们与您的应用程序以声明方式组成 。＆＃34;强调我的。