Question

我正在使用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组件

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组件

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

Answer 1

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

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

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

1 个答案: