首页 文章

仅在一个页面上显示React组件

提问于
浏览 次
1

我正在使用React构建我的第一个SPA，但我的React理论还没有 . 我有一个主要组件，它呈现一个Header组件 . Header组件呈现三个组件，Navigation，Claim和Bars . 问题是声明和条形应仅在主页上呈现而不在其他页面上呈现 . 不知道怎么做，我知道我必须从Main拿出它但不确定我是否应该在路线上工作，如果我把所有东西放在主页组件上或者是否有最好的做法 .

Routes.js

var routes = (
  <BrowserRouter>
    <Main>
      <Route exact path="/" component={Home}/>
      <Route exact path="/services" component={Services}/>
    </Main>
 </BrowserRouter>
);

Main.js component

var Main = React.createClass({
  render: function(){
   return (
      <div className="wfp-grid" role="main">
        <div className="wfp-u-1">
          <Header />
          <div className="wavy"></div>
          {this.props.children}
        </div>
      </div>
    );
  }
});

Header.js component

var Header = React.createClass({
  render: function(){
    return (
      <header className="wfp-header-int">
        <Navigation />
        <Claim />
        <Bars />
     </header>
   );
  }
});
reactjs react-router

1 回答

  • 3

    在 Header 组件中，您需要从路由器获取当前URL，然后根据URL呈现特定组件

    var Header = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    render: () => {
        let curLocation = this.context.router.getCurrentLocation().pathname

        return (
            <header className="wfp-header-int">
            <Navigation />
            { curLocation === '/' && <Claim /> }
            { curLocation === '/' && <Bars /> }
         </header>
        )
    }
})

    ps）这种方法适用于 react-router v3，不确定它是否适用于v4

    回复于

相关问题