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 showing it in the same page beneath banner, i want to show it in different page. How can i do it on react router v4?

Here is my code (Right now when add restaurant is clicked, form box is shown on same page under banner)

const routes = [
      pattern: '/restaurant',
      component: () => <Content />
  { pattern: '/addrestaurant',
    component: () => <AddRestaurant />

class HomeScreen extends Component {
    render() {
        return (
              <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 className="ui page grid">
              {routes.map((route, index) => (

enter image description here