react使用二级（多级）路由（rout）实现局部跳转

这种用法其实在实际开发中，很多地方都要用到。但是在百度以后却发现没有相关的帖子。{黑人问号？}

对于很多新入坑react的小伙伴来说，可能遇到过需要用route的地方就是在页面跳转的时候。但是随着进一步的实践，发现，如果想要只在某个div里面实现跳转，（比如当我们点击了side中的某个menu后，想要右边的content显示为对应的）该怎么办呢？还是使用以前的route方法？

那肯定是不行的，这里我们就要使用到二级路由

话不多说，直接上代码：
最外层route

 <Provider store={Store.provider}><Router history={global.History}><Switch><Route path="/Home" exact component={Home}/><Route path='/configPanel' component={ConsolePanel}/>          <Route path='/login' component={Login}/></Switch></Router></Provider>

二级route （这个switch在ConsolePanel组件中）

<Layout><Sider width={200} style={{ background: '#fff' }}><Menumode="inline"defaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}style={{ height: '100%', borderRight: 0 }}theme='dark'><SubMenu key="sub1" title={<span><Icon type="laptop" />系统管理</span>}><Menu.Item key="1"><Link to='/configPanel/test'>用户管理</Link></Menu.Item></SubMenu></Menu>{/* <PanelSide/> */}</Sider><Layout style={{ padding: '0px' }}><Content style={{background: '#fff', padding: 24, margin: 0, minHeight: 280,}}><Switch><Route path="/configPanel/test" component={Test} /></Switch></Content></Layout></Layout>

注意这里route 的path

第一层，/configPanel
第二层，/configPanel/test

原理：<Link to='/configPanel/test'/> => 识别到有两层，/configPanel和/test，对于路由来说，我们现在在/configPanel这一层发起跳转请求，而根据path，跳转的目标也是在这一层，所以就会在/configPanel中的route进行匹配,然后再switch 除渲染对应的组件

react使用二级（多级）路由（rout）实现局部跳转相关推荐

VUE二级/多级路由配置方式（嵌套路由）
二级路由中path写法不同对应router-link标签to属性的不同写法二级路由配置path:"/XXX",path中带/ ,则对应的路由导航router-link中的to属性 ...
React多级路由 React子路由
React多级路由 React子路由设置新建一个Home.jsx文件和Home.css文件 css文件内容就不写了 Home 文件内容如下为了解决点击Link时,路由变化而子路由页面未变化,所以 ...
react-router多级路由设置默认子路由
react-router多级路由设置默认子路由最终效果图目录文件路径代码最终效果图目录文件路径代码 src/App.js 多级路由的Route配置不能加 exact, 否则子路由匹配不进去 ...
vue3.0+ts+element-plus多页签应用模板：多级路由缓存
目录系列文章一.先说点啥 1. 为啥需要路由缓存? 2. 怎么实现路由缓存? 二.路由扁平化三.定义tag模块处理路由缓存四.切换路由时加入缓存五.使用keep-alive 系列文章 vue ...
React+DvaJS 之 hook 路由权限控制
博客学院下载 GitChat TinyMind 论坛 APP 问答商城 VIP 活动招聘 ITeye 写博客发Chat 登录注册原 React+DvaJS 之 hook 路由权限控制 20 ...
React+Nginx 二级域名指向配置
使React线上项目二级域名指向端口欢迎使用Markdown编辑器开始前检查你的Nginx 检查是否正常编写nginx.conf 在同级目录的conf.d目录里清理一下缓存欢迎使用Markd ...
React Native项目配置路由和选项卡导航__React Navigation的使用
React Native 配置路由在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...
React教程之react-router路由(create-react-app+webpack+route)
What's React-Router React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 前言继续上一 ...
全局路由守卫和局部路由守卫
全局路由守卫和局部路由守卫今日有童鞋问我全局的路由守卫怎默写我直接细心地教了教他,现在我更新一下博客里面的全局路由守卫和单个的路由守卫希望对你们有所帮助! 注(我的数据是保存到vuex里面的) 此 ...
用Gitee Pages服务在线预览vue3前端项目:静态网站+多级路由+history模式(踩坑)
目录目标与前提 vue打包.预览遇到的坑以及原因坑①:静态网站打开一片空白坑②:子路由刷新或直接输入时,网页一片空白或404 坑③:首页加载时间过长坑④:线上预览地址出错时,不显示404页面 ...

react使用二级（多级）路由（rout）实现局部跳转

react使用二级（多级）路由（rout）实现局部跳转相关推荐

最新文章

热门文章