[英]Keep Sidebar with React Router
我想切换Detail
和Blog
但仍保留Sidebar
。 我使用下面的代码,但它不起作用。 你能帮我纠正一下吗? 非常感谢。
const routes = (
<Switch component={App}>
<Route exact key="detailpost" path={CelestialSettings.path + 'posts/:slug'}
components={{main: Detail, sidebar: Popular, mainbottom: Categories}} />) }
/>
<Route exact key="listpost" path={CelestialSettings.path}
components={{feature:Featurex, main: Blog, sidebar: Popular, mainbottom: Categories}} />) }
/>
</Switch>
);
class App extends React.Component {
render () {
const {feature, main, sidebar, mainbottom } = this.props;
return (
<div>
<div className="container">
<div className="main-feature" id="main-feature">
{feature}
</div>
</div>
<div id="content" className="site-content">
<div className="container">
<div className="divcontainer">
<div id="po-homepage" className="content-area">
{main}
</div>
<aside id="secondary" className="sidebar widget-area">
<div className="popular_post" id="popular_post">
{sidebar}
</div>
</aside>
</div>
</div>
</div>
<div className="cat-list">
<div className="container">
<div className="thecategories" id="thecategories">
{mainbottom}
</div>
</div>
</div>
</div>
)
}
}
ReactDOM.render(
(routes),
document.getElementById('app')
);
要在多个路由中保持相同的侧边栏,可以将侧边栏组件放在与Switch组件相同的级别上。 粗略的例子:
const routes = (
<div>
<YourSidebar>
{/* ... */}
</YourSidebar>
<Switch component={App}>
<Route ... />
<Route ... />
{/* ... */}
</Switch>
</div>
);
这样,React-Router不会重新呈现(或更新)侧边栏组件,只控制<Switch>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.