我想将侧边栏连接到仪表板。 每次单击侧边栏中的图标时,我都希望侧边栏保持不变,但仪表板要更改。 https://imgur.com/1hwNlNr我在渲染时遇到问题。 当我点击声音图标侧边栏时,你可以看到https://imgur.com/YjLmhLh ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我想切换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.