繁体   English   中英

保持边栏与反应路由器

Keep Sidebar with React Router

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我想切换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')
);
1 个回复

要在多个路由中保持相同的侧边栏,可以将侧边栏组件放在与Switch组件相同的级别上。 粗略的例子:

const routes = (
    <div>
        <YourSidebar>
            {/* ... */}
        </YourSidebar>
        <Switch component={App}>
            <Route ... />
            <Route ... />
            {/* ... */}
        </Switch>
    </div>
);

这样,React-Router不会重新呈现(或更新)侧边栏组件,只控制<Switch>

1 带有 React-Router 的 SideBar 和仪表板

我想将侧边栏连接到仪表板。 每次单击侧边栏中的图标时,我都希望侧边栏保持不变,但仪表板要更改。 https://imgur.com/1hwNlNr我在渲染时遇到问题。 当我点击声音图标侧边栏时,你可以看到https://imgur.com/YjLmhLh ...

2 React Router - 侧边栏的嵌套路由

我有一个关于在我正在处理的反应客户端CMS应用程序中进行路由的问题。 我们使用react-router但这个问题一般与路由有关。 当用户访问网站的页面时,我们有一个抽屉/侧边栏,允许用户管理网站的基本实体,如页面,媒体,用户等。目前我们使用redux动作来显示/隐藏页面中的元素。 我们 ...

3 带有响应路由器的嵌套侧边栏

我正在尝试在我的配置文件设置组件中创建嵌套的路由,我阅读了react-router文档,而那里的解决方案并未涵盖我的情况。.我有一个包含所有路由和受保护路由的App组件: 然后在EditUser组件中,我还有另一个Switch组件: 和嵌套的导航栏组件: 我正在尝试创建类似于Dribbb ...

5 侧边栏的react-router-dom配置

我正在基于react-boilerplate创建应用程序,然后为主页添加sigma仪表板模板。 假设我有4页: 登录 主页 用户 找不到页面 我的路线代码是这样的: 对于登录名,主页和用户,它已经如我预期的那样显示了。 将显示没有侧边栏的登录 ...

8 如何使用React Router正确实现侧边栏?

我正在尝试使用react和react路由器构建一个主从视图,这种尝试是试图模仿Creative tim的material-dashboard-react,这是我的实际代码: 因此,行为应为我选择一些东西并在侧边栏旁边进行渲染,如下所示: 但是当select无法正确呈现时,我该怎么办 ...

9 react-router侧边栏示例理解

我尝试使用react-router侧边栏示例: https : //reacttraining.com/react-router/web/example/sidebar 到目前为止,一切正常。 但是,如何在容器中定义不会重新加载页面且未在边栏中显示的附加路由? 如何将cons ...

10 在 MaterialUI 侧边栏中使用 React Router

我使用 MaterialUI 代码 ( https://material-ui.com/components/drawers/ ) 创建了此内容。 我还尝试修改它以实现一些路由器。 这个想法是侧边栏中的一些按钮会改变内容。 这是我正在使用的代码: 我遇到的问题是,当我单击带有链接的按钮时,它不会 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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