如何在侧边栏中引用作为react组件编写的页面？
在React中，可以通过侧边栏组件来引用作为React组件编写的页面。以下是一种常见的实现方式：
- 首先，创建一个侧边栏组件（Sidebar），可以使用React函数组件或类组件来实现。该组件通常包含一个菜单列表，用于导航到不同的页面。
- 在侧边栏组件中，使用React Router来管理路由。React Router是React官方推荐的路由库，用于实现页面之间的导航。
- 在侧边栏组件中，使用React Router的Link组件来创建导航链接。Link组件可以将点击事件与指定的路由路径关联起来，从而实现页面之间的切换。
- 在主页面组件中，使用React Router的Route组件来定义不同路径对应的页面组件。这些页面组件可以是以React组件形式编写的页面。
- 在主页面组件中，将侧边栏组件放置在合适的位置，例如页面的左侧或右侧。
通过以上步骤，你可以在侧边栏中引用作为React组件编写的页面。用户点击侧边栏中的链接时，React Router会根据配置的路由规则加载相应的页面组件，并在主页面中展示。
在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来部署React应用，并使用腾讯云的云数据库（TencentDB）来存储数据。此外，腾讯云还提供了云原生应用引擎（Tencent Cloud Native Application Service，Tencent CNA）来简化应用的构建和部署过程。
更多关于腾讯云产品的信息，你可以访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
docusaurus文档描述了如何创建自定义页面作为react组件。 它还介绍了如何将此页面添加到headerLinks部分。所以给自定义页面' custom -page.js'，我可以像这样将它添加到headerLinks中： const siteConfig = { {但是，看在上帝的份上，我该如何将该页面添加到侧边栏配置
浏览 17提问于2019-04-05得票数 1
回答已采纳
背景:我目前正在从事一个react项目，在这个项目中，我包含了一个侧栏组件，以显示某种内容。侧边栏本身从右边滑进来，并在网页上的现有内容上滑动。我使用门户将侧边栏呈现到页面的主内容容器中，而不管组件放在何处的React。侧栏有一个固定的位置，到目前为止，我已经创建了一些不太优雅的钩子来测量页面
浏览 3提问于2020-03-11得票数 0
我的应用程序中的大多数页面都位于视图端口中，因此到目前为止，我一直使用height: 100vh作为<SideNav />组件。但是现在我的几个页面滚动，这破坏了侧栏的功能，因为它在开始滚动时突然结束。
然而，height: 100%也不起作用，实际上侧边栏的长度甚至更短。如何使侧边栏始终延伸整个页
浏览 2提问于2019-08-27得票数 1
回答已采纳
2回答
到目前为止，我和我的团队设置我们的应用程序的方式是，我们的导航SideBar包装了所有页面，所以我们不必将其传递到每个页面，但我想隐藏在登录页面中，当用户在登录页面上时，有没有什么方法可以隐藏它？这是我的路线 function App() { <ApolloProvider client={client}>
<Router>
浏览 32提问于2021-08-13得票数 1
Here是我的代码。 我使用react-burger-menu来实现侧边栏。 侧边栏工作正常。 我的问题是如何在标签中打开Home或GG？现在，当我单击该链接时，浏览器将正确显示组件内容，但侧边栏将消失。 当我浏览不同的组件时，我想保留侧边栏。 有可能吗？ 您能告诉我其他模块是否可以这样做吗？ 非常感谢
浏览 26提问于2021-01-26得票数 0
2回答
我有一个地图组件，其中包含一个子边栏组件。我正在尝试做一个相对简单的任务，当单击侧边栏的地图标记时，滚动到侧边栏中的位置列表中的位置。但是，因为侧边栏需要包装在withRouter和connect中，所以我无法在地图组件中设置引用(ref) => th
浏览 13提问于2018-01-04得票数 2
回答已采纳
2回答
我有一个应用程序组件，它有子组件NavigationBar。NavigationBar也有孩子，那就是NavigationBarTabs。我想做的是，管理应用程序组件中的路由，但在NavigationBarTabs中有链接。如果我这样做，我只能通过刷新来获取App中的新内容。如果我保留应用程序组件中的链接，它工作得很好，但显然我希望这些链接是在NavigationBarTabs中。
浏览 13提问于2019-05-22得票数 2
1回答
我想在主面板的右侧放置一个粘性的侧边栏。粘性侧边栏应该是“粘性”的，当向下滚动到它自己的顶部时，侧边栏将确定位置并停留在页面的顶部，而不是向上滚动。我已经在这里完成了部分工作：https://codesandbox.io/s/gallant-saha-zgmnw 现在我的问题是:如小提琴中所示，在sidebar类中<
浏览 13提问于2021-01-14得票数 0
我使用redux来管理我的侧边栏可见性状态(sidebarvis: true，false)。路由也是由redux管理的。当我点击一个链接在我可见的侧边栏中更改页面时，redux成功地更新了路由器状态，但sidebar.pushable中的内容不会更新，直到我的侧边栏被切换(直到toggleSideBar操作被调度为止)。换句话说，redux工作正
浏览 1提问于2018-06-26得票数 0
我正在React中创建仪表板/管理控制面板应用程序，但我不确定如何正确处理组件渲染。因此，首先我的主App组件看起来是这样的： <div className="main--container"> <Redirect>
它工作得很好，但在用户登录后，我会将他重定向到/dashboard，在那里我想嵌套其他路由，<
浏览 0提问于2019-11-02得票数 0
1回答
所以，我有一个用wordpress构建的媒体站点，它使用react js (我不建议这样做，因为wordpress有自己的方法来做一些并不总是很好的反应)。在这个站点上，我希望有一个侧边栏，它根据旁边文章的高度动态加载侧边栏的元素(广告、推荐文章、社交媒体按钮等)。这些元素本身就是反应元件。所以，它的工作方式，在我的头脑，也就是说，是文章组件首先加载到页面
浏览 0提问于2015-04-08得票数 3
回答已采纳
3回答
有人用过react pro侧边栏吗？谁能告诉我如何使用sass侧边栏组件和如何增加侧边栏的长度。有没有其他的库有关于如何使用侧边栏的例子。下面是react pro侧边栏的例子。
浏览 2提问于2020-09-01得票数 1
1回答
外部组件(页面布局)： render() { <div className="container</p> );});
现在，如果我们根据用户所在的页面动态地将这些组件呈现给document.body (使用HTML5 History API)，这会对性能产生怎样的<
浏览 2提问于2014-09-29得票数 1
我是angular 2的新手，所以如果我的术语不正确，请原谅。我有一个使用angular 2编写的应用程序，我似乎无法理解事件是如何在组件之间触发和处理的概念。该应用程序有一个导航侧边栏，其中包含一个菜单和其他登录的用户特定数据。当用户没有登录时，侧边栏应该是空的，并且用户登录了，侧边栏应该加载适当的菜单和用户
浏览 1提问于2016-12-11得票数 0
我使用进行导航，并使用嵌套的connect()ed组件。这似乎很好，只是当反应路由器路由改变时，我的嵌套组件不会重新呈现。特殊的烯丙基，在下面的结构中，App和Sidebar是connect()编辑的组件，它们都需要来自state的信息。当我单击Link in Sidebar时
我已经将react路由器-redux<e
浏览 6提问于2016-12-08得票数 0
我正在使用React和create-react-app来创建和应用程序，在上述应用程序中，我使用了一个侧边栏，当屏幕尺寸为768px时，我已经将其翻译出页面，该侧边栏将通过点击汉堡包来转换到页面上transform: translateX(0);这在firefox和chrome浏览器上运行良好，但当我使用ipads和iphones查看时，当我单击汉堡时，它只显示页面高度的侧边<
浏览 5提问于2019-11-19得票数 0
1回答
我正在使用 组件创建一个侧栏组件。
我试着找出代码，但得到了如下所示的图像。
正如我们所看到的，侧边栏组件看起来像是位于内容页面下面(这就是为什么会裁剪橙色框)。同时，侧栏组件显示水平滚
浏览 4提问于2021-10-19得票数 1
回答已采纳
我的页面由类的层次结构和许多可重用的组件组成。按钮组件的多个实例可以存在于页面中的任何位置，在单击时，它们会触发在公共侧边栏列表组件中填充不同类型数据的操作。要求是突出显示上次单击以加载该侧边栏列表中的数据的按钮。当然，这也意味着从“上一步
浏览 7提问于2018-01-17得票数 0
回答已采纳
我们在Reactjs的项目中使用了微前端架构。该应用程序由容器子项目组成，其中包括所有其他子项目也应该具有的主要组件和页面结构(如页眉、页脚、一些小部件、侧边栏……)问题是，当我导航到其他子项目的页面时，我注意到container子项目的一些组件在生产中看起来被破坏了是什么导致了这样的问题？我们正在使用React和Material UI。
浏览 12提问于2021-05-03得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
