Как настроить реагирующий маршрутизатор для отображения правильной компоновки?

Question

Я пытаюсь настроить правильную маршрутизацию для приложения реакции, чтобы показать макет следующей схемы https://www.facebook.com/photo.php?fbid=2352043018150167&set=pcb.2534370943249564&type=3&theater&ifg=1 Первый уровень - это панель навигации (всегда видимая) и главное окно, которое должно отображать боковую панель и список продуктов.После того, как вы щелкнете по продукту, должны отобразиться детали продукта (боковая панель все еще видна).В меню вы можете выбрать контакт, который вызывает отображение контактных данных в главном окне (теперь боковая панель не видна).Я не могу понять, как правильно построить маршрутизацию, чтобы изменить главное окно.Я пробовал несколько вещей, но всегда есть что-то не так.Пожалуйста, не могли бы вы мне помочь?Смотрите мой код ниже.

<HashRouter>    
        <Navbar /> 
        <Switch>
            <Route > 
            <section className="main-container"> 
                <Sidebar />
                <div className="product-container">
                    <Route path="/" render={Main}/>
                    <Route path="product/:name" render={(products, addedProduct) => 
                    <ProductItem products={products} addedProduct={addedProduct}/>} /> 
                </div>
            </section>
            </Route>
            <Route path="/subpage/:name" component={Subpage} />                            
            <Route path="*" component={NotFound} /> 
        </Switch>       
 </HashRouter>