如何配置react-router以呈现正确的布局？

Question

我正在尝试为react应用配置正确的路由，以显示遵循的模式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>