繁体   English   中英

保持边栏与反应路由器

[英]Keep Sidebar with React Router

提示:本站提供中英文对照查看,鼠标放在中文字句上可显示英文原文。 若本文未解决您的问题,推荐您尝试使用帮您解决。

我想切换DetailBlog但仍保留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.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM