首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在React中从侧边栏单击后路由到页面?

在React中,可以使用React Router来实现从侧边栏点击后路由到页面的功能。React Router是React官方推荐的路由库,可以帮助我们在React应用中实现页面之间的导航。

以下是实现从侧边栏点击后路由到页面的步骤:

  1. 首先,确保已经安装了React Router。可以使用以下命令进行安装:
代码语言:txt
复制
npm install react-router-dom
  1. 在应用的根组件中,引入React Router的相关组件和方法:
代码语言:txt
复制
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  1. 在根组件中定义侧边栏组件,并使用Link组件来创建导航链接:
代码语言:txt
复制
function Sidebar() {
  return (
    <div>
      <ul>
        <li>
          <Link to="/home">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </div>
  );
}
  1. 在根组件中定义页面组件,并使用Route组件来指定路由对应的组件:
代码语言:txt
复制
function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Contact() {
  return <h2>Contact</h2>;
}
  1. 在根组件中使用Router组件包裹整个应用,并使用Route组件来指定路由对应的组件:
代码语言:txt
复制
function App() {
  return (
    <Router>
      <div>
        <Sidebar />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}
  1. 最后,将根组件渲染到页面中:
代码语言:txt
复制
ReactDOM.render(<App />, document.getElementById('root'));

现在,当点击侧边栏中的链接时,React Router会根据指定的路由路径渲染对应的组件,实现从侧边栏点击后路由到页面的效果。

推荐的腾讯云相关产品:腾讯云服务器(CVM),腾讯云对象存储(COS),腾讯云数据库(TencentDB),腾讯云函数计算(SCF)等。你可以在腾讯云官网上找到这些产品的详细介绍和文档。

腾讯云产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Navigation 3x系列教程』createDrawerNavigator开发指南

createDrawerNavigator API createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig): RouteConfigs(必选):路由配置对象是路由名称路由配置的映射...; initialRouteName: 初始化哪个界面为根界面,如果不配置,默认使用RouteConfigs的第一个页面当做根界面; order: drawer排序,默认使用配置路由的顺序; paths...: 提供routeNamepath config的映射,它覆盖routeConfigs设置的路径。...其中路由名openDrawer对应这打开侧边的操作,DrawerClose对应关闭侧边的操作,toggleDrawer对应切换侧边操作,要进行这些操作我么还需要一个navigation,navigation...可以props获取; 打开侧边:navigation.openDrawer();; 关闭侧边:navigation.closeDrawer();; 切换侧边:navigation.toggleDrawer

7K10

后台管理系统 – 页面布局设计

前端的后台管理系统相比于其他普通项目,开发设计的角度来说有几点比较特殊: 一个是权限设计,具体实现可参考:传送门。 一个是页面布局的设计,也是本文要说的。...示例项目:react-antd-mobx-admin 技术栈:react 17 + antd 4 + react-router-dom 6 + ts 路由统一管理使用 react-router-waiter...对于侧边菜单和面包屑导航,element和antd都有相应的组件可以直接使用,其他的手写实现。 三、css布局 良好的css布局代码才能保证页面布局的稳定性。...侧边的实现方式是难点,因为这里即涉及如何和路由数据匹配,又涉及权限的筛选。...侧边最好是和路由配置共用一套数据,方便扩展和维护,这里得益于 react-router-waiter 已经封装好的路由管理方案(类vue-router),所以直接读取路由配置数据,动态生成菜单组件结构

7.2K51

快速上手微前端框架 icestark (一)

注册配置,修改 name, activePath, title, entry 这四个属性即可 app文件.png 注意 activePath 指向子应用路由地址,entry 地址这里使用子应用启动的根路由地址..., 也可以指向对应的子应用指定地址, http://localhost:3333/react 配置主应用的侧边,指向对应的子应用 在主应用的 BasicLayout.vue 文件配置 el-sub-menu...layout.png 配置子应用的路由 单独配置子应用路由对应主应用的 activePath,实现正常加载 React 子应用路由, 配置了一个 /react 路由地址 react-router.png...Vue 子应用路由, 配置一个 /vue 路由地址 vue-router.png 刷新主应用,侧边现在可以正常切换了 这时候主应用的侧边的内容对应到本地启动的子应用,并且能访问就整合成功了,这时候已经本地示例实现了...接下来,将在本地示例实现子应用间的路由切换(页面跳转)和应用互相通信。

94010

当企微侧边遇上微前端

企微侧边 按国际惯例,简单地过一下企微侧边是什么,诺,就是下面里红框的东西: 侧边本质上就是一个 H5 页面,需要在企业微信后台里配置对应的 name 和 url 即可: 如果你了解过微前端,...应对已有 H5 嵌入侧边的场景 微前端思路 刚刚提到通过注册多个微应用实现 “注册多个侧边应用” 的方式就是一个很好的管理方法。...而在我之前写的 wecom-sidebar-react-tpl React 侧边开发模板里已经实现了大部分内容,所以这里直接用现成的公共逻辑就完事了。...注册微应用(侧边应用),并在 props 传入共享数据和 JsSdk 微应用在暴露的生命周期里的 mount 的参数 props 获取主应用传递的数据 微应用拿到主应用数据,可以选择放到 redux...,用于承载别的部门的侧边就用。

1.3K30

快速上手Vue Router和组合式API:创建灵活可定制的布局

该教程基础开始,介绍了Vue Router的概念,如何配置路由以及如何使用组合式API。它还介绍了如何在Vue Router中使用组合式API来创建布局。...教程还包括如何使用路由钩子函数和路由元信息来控制布局。 ---- Vue Router 是在 Vue.js 单页应用程序创建路由的事实标准。...假设我们正在构建一个博客,在该博客,某些页面可能在主要内容的两侧都有侧边: 其他页面只需要在内容旁边放置一个侧边,而且主内容前后的位置可以变化。 而其他页面则根本不需要侧边。...选项1是为侧边创建组件,并根据需要在每个页面包含它们。...--...--> 请注意,新的路由器视图具有与我们提供给路由记录的组件属性的键相匹配的名称属性( LeftSidebar 和 RightSidebar ) 最后,这一次页面本身可以完全排除侧边

1.2K10

后台管理系统 – 权限设计

方式一:由后端返回筛选路由配置,前端渲染 描述: 这种就是前端将所有路由配置数据给后端存储,后端对根据用户权限对路由数据筛选返回到前端,再由前端渲染。...2、导航菜单的处理 一般来说后台管理系统都会有个导航菜单,以侧边导航居多,对于用户来说这个也是所有页面的访问入口,所以导航菜单需要根据用户权限动态展示。...自定义的数据都放这里面 title: '首页', // 菜单标题 accessId: 10000, // 权限id hideMenu: false, // 是否在侧边隐藏当前路由菜单...导航菜单动态生成一定程度上限制了用户访问无权限的路由,但还不够,用户如果跳转一个没有权限的路由,或者在地址手动输入没有权限的路由网址,也是能访问页面,这就需要处理。...一般用户的权限信息都是接口异步获取,所以我们需要在用户打开项目进入页面之前先请求接口拿到权限信息,然后再做后续页面的展示,这样才能保证在用户手动输入url场景下能有效地进行权限判断和路由拦截。

4K40

React Native开发之react-navigation库详解

众所周知,在多页面应用程序页面的跳转是通过路由或导航器来实现的。...DrawerNavigator:用于实现侧边抽屉页面的导航组件。 需要说明的是,由于react-navigation在3.x版本进行了较大的升级,所以在使用方式上与2.x版本会有很多的不同。...initialRouteName:设置栈管理方式的默认页面,且此默认页面必须是路由配置的某一个。 initialRouteParams:初始路由参数。...headerLeft:设置标题左侧展示的React组件。 headerStyle:设置导航条的样式,背景色、宽高等。 headerTitleStyle:设置导航的文字样式。...除了可以实现路由管理和页面跳转操作外,还可以使用react-navigation实现顶部和底部的Tab切换,如图7-13所示。 ?

5.8K10

React Navigation 3x系列教程』createBottomTabNavigator开发指南

createBottomTabNavigator API createBottomTabNavigator(RouteConfigs, BottomTabNavigatorConfig): RouteConfigs(必选):路由配置对象是路由名称路由配置的映射...BottomTabNavigatorConfig(可选):配置导航器的路由(:默认首屏,navigationOptions,paths等)样式(,转场模式mode、头部模式等)。...官方只提供了TabNavigator页面的静态配置方式,如果TabNavigator页面不固定,需要动态生成那么需要怎么做呢?...:createBottomTabNavigator被包裹在TabNavigator页面是无法借助navigation跳转到外层StackNavigator页面的,这种应用场景很多,尤其是你需要定制...TabNavigator的时候; 初始化传参:如何在设置页面的时候传递参数呢?

7.1K30

Hooks + TS 搭建一个任务管理系统(五)-- 路由跳转页面

projects/1 地址下,这样显然是不能找到对应的页面的,它缺少了页面的标识 我们在 project/index.tsx 文件,编写侧边的样式,以及设置路由的跳转,这里我们需要采用 react-router...的 Link 组件来实现地址的跳转,侧边对地址的操作,会导致右侧,看板和任务组的切换,因此我们需要给右侧配置相应的 Route 连接组件 <...,当上面两个都没有匹配上时,我们将它的地址拼接上 /kanban 强制的跳转到 /kanban 页面,这也是实现我们项目列表点击跳转显示看板页面的原因 在这里有很多值得注意的地方,我们在这里采用了...浏览器的历史记录就像一个栈的数据结构,当我们采用 to 跳转时,实际上是向栈 push 了一个路由地址,这里我们采用 Navigate 来进行设置默认路由,它的操作也是 push,也就是说,我们为了跳转到当前页面被...,在这个版本中使用 Navigate 会有问题,这个 Navigate 的默认路由不会生效,具体原因不是很清楚,遇到这种情况可以降低一下版本 beta0 这个版本是没有问题的 二、封装 useDocumentTitle

74330

Vue-Element-Admin使用

1则不会显示下拉框 反之则会显示 除了上诉提到的路由的各项参数,还存在其他参数可供选择: // 当设置 true 的时候该路由不会在侧边出现 401,login等页面,或者如一些编辑页面/edit...children 声明的路由大于1个时,自动会变成嵌套的模式--组件页面 // 只有一个时,会将那个子路由当做根路由显示在侧边--引导页面 // 若你想不管路由下面的 children 声明的个数都显示你的根路由...,支持多个权限叠加 title: 'title' // 设置该路由侧边和面包屑展示的名字 icon: 'svg-name' // 设置该路由的图标,支持 svg-class,也支持 el-icon-x...activeMenu: '/article/list' } 其中activeMenu意思是路由该路径下,在导航高亮指定的路由地址 创建多级路由三级路由),需要在上一级的根文件下添加一个...使用 scoped ,父组件的样式将不会渗透子组件。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。

31310

前端UI框架Ant Design Pro

侧边和通知: ?...如何使用 Ant Design Pro 布局# 通常布局是和路由系统紧密结合的,Ant Design Pro 的路由使用了 Umi 的路由方案,为了统一方便的管理路由页面的关系,我们将配置信息统一抽离.../Dashboard/Workplace' }, ], }, ], }] 映射路由页面布局(组件)的关系代码所示,完整映射转换实现可以参看 router.config.js。...icon: 当前路由在菜单下的图标名。 hideInMenu: 当前路由在菜单不展现,默认 false。 hideChildrenInMenu: 当前路由的子级在菜单不展现,默认 false。...根据不同场景区分抽离布局组件# 在大部分场景下,我们需要基于上面两个组件封装一些适用于当下具体业务的组件,包含了通用的导航、侧边、顶部通知、页面标题等元素。

3.4K20

React Navigation 3x系列教程』之React Navigation 3x开发指南

这篇文章将向大家分享React Navigation3x开发的一些实用技巧,以及navigatorReact Navigation的一些实战经验。...createMaterialTopTabNavigator:屏幕顶部的材料设计主题标签; createDrawerNavigator: 抽屉效果,侧边滑出; createSwitchNavigator...这些功能是: this.props.navigation push - 导航堆栈的一个新的路由 pop - 返回堆栈的上一个页面 popToTop - 跳转到堆栈中最顶层的页面 replace...其中key表示你要返回到页面页面标识id-1517035332238-4,不是routeName。 可以通过指定页面的navigation.state.key来获得页面的标识。...StackActions Reset : 重置当前 state 一个新的state; Replace : 使用另一个路由替换指定的路由; Push : 在堆栈顶部添加一个页面,然后跳转到该页面; Pop

4.3K30

React Navigation 3x系列教程』之createStackNavigator开发指南

createStackNavigator API createStackNavigator(RouteConfigs, StackNavigatorConfig): RouteConfigs(必选):路由配置对象是路由名称路由配置的映射...StackNavigatorConfig(可选):配置导航器的路由(:默认首屏,navigationOptions,paths等)样式(,转场模式mode、头部模式等)。...、headerLeft等; StackNavigatorConfig react-navigation源码可以看出StackNavigatorConfig支持配置的参数有10个。...这7个参数可以根据作用不同分为路由配置、视图样式配置两类,首先看用于路由配置的参数: 用于路由配置的参数: initialRouteName: 设置默认的页面组件,必须是上面已注册的页面组件。...screen: 有渐变透明效果, 微信QQ的一样。 none: 隐藏导航

4.9K10

React 折腾记 - (1) React Router V4 和antd侧边的正确关联及动态title的实现

前言 一既往,实战出真理. 有兴趣的可以瞧瞧,没兴趣的大佬请止步于此. 免得浪费您的时间 ---- 效果图 基于antd的sidebar组件封装 ? ?...结合路由的history对象的pathanme 在组件渲染完毕的情况下,再去遍历路由表,通过setState重新渲染侧边 为什么不在组件初始化的时候就设置,那这样对于404的路由没法控制 react-router-dom...v4虽然提供了全局404组件,但是history里面没有代表404的状态 实现目标 点击侧边的子菜单会改变标题,对应的item也会高亮 直接修改路由,初次加载等会自动展开对应的分组,高亮对应的子项... ); } } export default Sidebar; collapsed,onCollapse这些是控制侧边缩小的...有人肯定会说,官方有现成的antd pro为嘛不用..我看了跟dva高度结合,不喜欢,那就自己搭架子 之前用vue和ng都是整个系统布局自己写一遍...这次试试用现成的侧边来实现 有不对之处请留言,看到会及时修正

2.9K30

Core + Vue 后台管理基础框架4——前端授权

与后端不同,前端主要是通过功能入口菜单、按钮的显隐来控制授权的。具体来讲,就是根据指定用户的制定权限来加载对应侧边菜单和页面内的功能按钮。我们一个个来讲。...2、侧边菜单   鉴于本项目使用了vue-router,那显然,侧边就会跟对应路由关联,同时,前端项目会注册路由导航事件,此事件见src根目录下permission.js: ?   ...截图中,上边的红框代表是在注册路由跳转前回调钩子,此钩子可以根据具体情况决定是否需要导航目的路由或导航其他路由。...下边的红框先调用menu store的获取侧边action,后端拿到本用户具有权限的侧边菜单: ?   ...后端拿到侧边菜单json,前端是没办法直接使用的,一堆json对象或者字符串,与Vue路由、视图并没法儿无缝衔接,所以上边我们看到调用了travseRoutes方法,此方法在前端工具类route.js

72110

React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边

前言 动态tab水平菜单,这个需求很常见,特别是对于后台管理系统来说; 因为当我们侧边层级多了,你要找到一个子菜单,必须找,展开,点击....目标 点击tab展示页面内容,同时关联侧边的菜单 tab自身可以关闭,注意规避只有一个的时候不显示关闭按钮,高亮的 杜绝重复点击tab的时候(tab和路由匹配的情况),再次渲染组件 一键关闭除当前url...以外的的所有tab 重定向的时候也会自动展开侧边(路由表存在匹配的情况) 可拓展的方向 有兴趣的自行拓展,具体idea如下 比如快速跳转到第一个或者最后一个的快捷菜单等 给侧边的子菜单都带上icon...的固定,不会给关闭所有干掉 ---- 代码实现 RouterStateModel.js(mobx状态维护) Model我们要考虑这么几点 侧边item的的组key,和子key,子name以及访问的url...} } const RouterState = new RouterStateModel(); export default RouterState; 复制代码 Sidebar.js(侧边组件

3.2K20

PubMed使用者指南(一)

为了限制检索结果的数量: 用更具体的检索条目替代广泛的条目(如下背痛而非背痛) 在检索包括额外的条目 使用侧边的过滤器来限制结果,出版时间、拥有全文、文章类型等 我检索了太少引文,如何扩展?...(1059-1524) 关于杂志检索的更多信息: 1.要使用检索生成器进行期刊检索,单击高级检索,然后所有字段菜单中选择期刊journal。...最流行的过滤器默认包含在侧边。...3.菜单左侧的选项列表中选择一个类别:文章类型、物种等。 4.在每个类别,选择你想要添加到侧边的过滤器。 5.单击Apply。这将关闭弹出菜单,并在侧边上与其他过滤器一起显示你的选择。...6.如果想要取消你的选择,请单击cancel或单击右上角的X以关闭弹出窗口并返回你的检索结果。 7.要将过滤器应用到检索,请单击侧边上的筛选器。

8.3K10

《vue3+ts+element-plus 后台管理系统系列三》之路由侧边

本项目侧边路由是绑定在一起的,所以你只有在 @/router/index.js 下面配置对应的路由侧边就能动态的生成了。大大减轻了手动重复编辑侧边的工作量。...// 当设置 true 的时候该路由不会在侧边出现 401,login等页面,或者如一些编辑页面/edit/1 hidden: true // (默认 false) //当设置 noRedirect...meta: { // 当你一个路由下面的 children 声明的路由大于1个时,自动会变成嵌套的模式--组件页面 // 只有一个时,会将那个子路由当做根路由显示在侧边--引导页面 // 若你想不管路由下面的...['admin', 'editor'] // 设置该路由进入的权限,支持多个权限叠加 title: 'title' // 设置该路由侧边和面包屑展示的名字 icon: 'iconfont...(默认 true) affix: true // 如果设置为true,它则会固定在tags-view(默认 false) // 当路由设置了该属性,则会高亮相对应的侧边

4.1K10
领券