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:

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

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

const Content = () => (
  <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.

const App = () => (
  <Router>
    <div>
      <Match pattern='/restaurant' component={Content} />
      <Match pattern='/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

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

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

HomeScreen.js

class HomeScreen extends Component {
    constructor(props){
      super(props);
    }

    render() {
        return (
          <div>
            {
            this.props.location.pathname.indexOf('addrestaurant') < 0 
            ? <div className="ui grid banner">
                <div className="computer tablet only row">
                  <div className="ui inverted fixed menu navbar page grid">
                    <Link to="/restaurant" className="brand item">Restaura</Link>
                    <Link to='/addrestaurant' className="item tab">Add Restaurant</Link>
                    <Link to="/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

const routes = {
  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(<Router history={history} routes={routes} />, document.body)

Content.js

class HomeScreen extends Component {
  constructor(props){
    super(props);
  }

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

Restaurant.js

class Restaurant extends Component {
  constructor(props){
    super(props);
  }

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

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