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

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>

标签： reactjsreact-router