Route To Different Page[react-router V4]

I am using react router v4 for routing. There is a scenario that when products is clicked i want to show products just beneath banner but when add restaurant is clicked, instead of

Solution 1:

The answer by user-013948 is the right approach, just the wrong react router version.

Essentially what you want to do is move any code that should only be rendered for certain matches into the component rendered by those matches.

Since the banner should only be rendered by some components, you should create a component just for it:

constBanner = () => (
  <divclassName="ui grid banner"><divclassName="computer tablet only row"><divclassName="ui inverted fixed menu navbar page grid"><Linkto="/restaurant"className="brand item">Restaurant</Link><Linkto='/addrestaurant'className="item tab">Add Restaurant</Link><Linkto="/products"className="item tab">Products</Link></div></div></div>
)

And then, any components that should display the banner should include it:

constContent = () => (
  <div><Banner />
    {/* other content */}
  </div>
)  

Then, when you render your project, the banner will only be rendered if it is part of a <Match>'s component.

constApp = () => (
  <Router><div><Matchpattern='/restaurant'component={Content} /><Matchpattern='/addrestaurant'component={AddRestaurant} /></div></Router>
)

Solution 2:

Declaring router

You want to break down elements into simple boxes and design the router accordingly. Basics of router is here

Depending on what you are trying to create, here's what I would do

Option 1 (Reuse components and hide banner)

App.js

constroutes= {
  path:'/',
  component:App,
  indexRoute: { component:HomeScreen },
  childRoutes: [
    { path:'restaurant', component:Content },
    { path:'products', component:Products },
    { path:'addrestaurant', component:AddRestaurant}
  ]
}

render(<Routerhistory={history}routes={routes}/>,document.body)

HomeScreen.js

classHomeScreenextendsComponent {
    constructor(props){
      super(props);
    }

    render() {
        return (
          <div>
            {
            this.props.location.pathname.indexOf('addrestaurant') < 0 
            ? <divclassName="ui grid banner"><divclassName="computer tablet only row"><divclassName="ui inverted fixed menu navbar page grid"><Linkto="/restaurant"className="brand item">Restaura</Link><Linkto='/addrestaurant'className="item tab">Add Restaurant</Link><Linkto="/products"className="item tab">Products</Link></div></div>
            : null}
          </div>
          {this.props.children} 
        </div>
        );
    }
}

Note: this.props.children is where the child components are rendered.

Option 2 (Use addrestaurant as sibling state)

App.js

constroutes= {
  path:'/',
  component:App,
  indexRoute: { component:HomeScreen },
  childRoutes: [
    { path:'restaurant', 
      component:Content, 
      childRoutes: [
        { path:'about', component:About },
        { path:'products', component:Products }
      ] 
    },
    { path:'addrestaurant', 
      component:Restaurant,
      childRoutes: [,
        { path:'add',  component:AddRestaurant },
        { path:'edit', component:EditRestaurant }
      ] 
    }
  ]
}

render(<Routerhistory={history}routes={routes}/>,document.body)

Content.js

classHomeScreenextendsComponent {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div><Banner />
        {this.props.children} 
      </div>
    );
  }
}

Restaurant.js

classRestaurantextendsComponent {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <div>
        {this.props.children} 
      </div>
    );
  }
}

It really depends on what you are trying to do. Hope this helps.