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

时间:2017-04-14 09:59:05

标签: reactjs react-router react-router-v4

以下实际上可以呈现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')
);

1 个答案:

答案 0 :(得分:0)

哪个首选取决于您要实现的目标。我倾向于选择方法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组件可能不应使用路由组件,但如果这是目标,我还会通过添加一些注释来明确AppRouter之外的内容。< / p>

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