CODEWITHSUNDEEP
reactjsreact-router
Laura Silvani
Laura Silvani

Reputation: 757

Displaying React components on one page only

I am building my first SPA with React but my React theory is not there yet. I have a Main component which renders a Header component. The Header component renders three components, Navigation, Claim and Bars. The problem is that Claim and Bars should be rendered only on homepage an not on other pages. Not really sure how to do it, I know I have to take it out from Main but not sure if I should work on the routes, if I put everything on the Homepage component or if there is a best practice for this.

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

Upvotes: 1

Views: 3695

Answers (1)

pumbo
pumbo

Reputation: 3826

In your Header component you need to get current URL from the router and then render specific components according to the 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) this approach works for react-router v3, not sure if it works for v4

Upvotes: 3

Related Questions