react-router嵌套路由页面无法显示

最新推荐文章于 2023-03-27 11:04:20 发布
最新推荐文章于 2023-03-27 11:04:20 发布
阅读量3.3k 收藏
点赞数 4
分类专栏： React 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42190640/article/details/106461885
版权

在index.js配置一级路由
在这里插入图片描述
在admin.js中配置二级路由
在这里插入图片描述
会发现二级路由无法访问，是个空白页

解决方法
一级路由中 Admin路由里的exact属性要删掉
在这里插入图片描述

第4章、React-Router路由配置；
weixin_44121341的博客
04-12 741
React-Router路由配置
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
React子路由由于不懂react-route中Outlet不显示
Ricale的博客
01-05 1754
最近搭了一个layout布局，由于之前没有尝试过，在搭建过程中遇到了子路由不显示的问题，路由如下。经过搜索才明白需要在layout组件中添加Outlet组件去表明子路由渲染的位置，如下。页面只显示了layout组件的内容，但home组件内容没有渲染。
解决react-router-dom V6路由嵌套时子路由无法显示的问题
frank7023
02-07 1026
解决react-router-dom V6路由嵌套时子路由无法显示的问题
react二级路由配置正确不显示页面的问题解决
qq_38256266的博客
09-14 4198
react二级路由配置正确不显示页面的问题解决 最近在写react项目，配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解。直到第二天豁然开朗，才发觉就这？？ 问题描述：在写react二级路由时，配置没有任何问题，（地址栏地址已经变了）但是页面就是不显示。 错误展示： 一级路由： 二级路由： 然后就， 地址栏正常变，二级页面死活不出来，把二级路由配置注掉又能出来。。。。 在百度了n条解决方案后，终于发现问题所在。 解决： 其实解决方案特别简单，因为我在二级路由配置中加
React子路由跳转，显示空白
qq_44096635的博客
06-04 3971
在使用React菜单组件，点击跳转不显示子路由，直接跳到空白页面 在子路由的上一级路由里，不能使用exact 会导致父级路由路径不匹配从而父子组件都显示不了 父级路由 render() { return ( <Router> <Switch> <Route path="/login" component={LoginRegister} /> <Route path="/register"
20 React react-router4.x中实现路由模块化、以及嵌套路由父子组件传值
03-01
总结来说，`react-router v4.x`提供了强大的路由管理和导航能力，通过路由模块化、嵌套路由以及父子组件间的通信，我们可以构建出结构清晰、易于维护的React应用。同时，利用高阶组件和保护路由的概念，我们可以...
react 导入 react-router-dom引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘
m0_54850952的博客
03-08 578
react-router-dom从V5升级到V6后，有些使用做了一些改变： (1) Switch 重命名为 Routes // v5 <Switch> <Route exact path="/"><Home /></Route> <Route path="/profile"><Profile /></Route> </Switch> // v6 <Routes> <R.
React-router 6
qq_67755657的博客
10-12 321
​1.概述React Router 以三个不同的包发布到 npm 上，它们分别为：react-router: 路由的核心库，提供了很多的：组件、钩子。react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等。react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:等。与React Router 5.x 版本相比，改变了什么？内置组件的变化：移除。
react-router 显示不了二级页面
weixin_45669496的博客
03-27 351
如果一级是一个真实的页面，再给它设置children，children就不会生效，得单写一个{}react-router 显示不了二级页面。一个{}里面只能有一个真实的页面，
vue-router 嵌套路由显示空白页
weixin_30352191的博客
02-21 2444
路由嵌套 路由跳转 当访问localhost:8080/enterZZ/companyHonor时显示空白 此时检查路径，拼写，是否导入等问题，没有发现错误，后查找资料得知缺少了：<router></router> 注：在App.vue文件中写了容器<router></router>，便以为其他地方不用在写了，其实不对，每一个有c...
react 路由switch标签 exact严格匹配 二级路由引用第三方ui库样刷新样式丢失问题
weixin_50736511的博客
09-17 236
Switch只显示匹配到的第一个路由 exact是Route下的一个属性，react路由会匹配到所有能匹配到的路由组件，exact能够使得路由的匹配更严格一些。 当需要配置的路径为这种时 刷新页面样式会丢失 解决：去掉路径上的这个点就行了 解决：把点换成%PUBLIC_URL% ...
vue 嵌套路由 页面空白问题
ljmkmnkl的博客
06-28 8113
vue 写嵌套路由时 页面打开空白 export default new Router({ routes: [ { path: '/', name: 'index', component: index }, { path: '/index', name: 'index', component: N...
React中使用路由组件中页面显示空白
知识虔诚的信徒，探索所有未知是信徒毕生的信仰
11-25 4050
Route和Routes组件显示异常？页面空白？如果你遇到这些问题看这篇文章就对了！
react路由hash转brower访问页面，页面空白
记录
07-26 803
初始使用的hash路由，即http://localhost:8000/#/index这种#分隔的方式，这种路由方式就是刷新后页面始终会回到首页，这不是想要的想过，所以就想要改成http://localhost:8000/index这种方式，即brower路由。 改动前的配置： 前端编译后生成文件路径： 改动后history不设置，默认就是brower路由方式。 一开始base没加，页面启动后一片空白，后续怀疑是不是后台路由和前端路由跳转混了，于是加了base配置（前端所有页面的路径都会带上front前缀
react二级路由自己摸索
前端大白话
06-28 7179
react二级路由 react二级路由，我使用的是react项目模版组件化的二级路由，所用的路由模式是哈希模式，因为写二级路由的话使用 BrowserRouter路由配置二级路由，会出现bug，需要进行重定向特别麻烦所以用哈希简单，效率高 一下是一级路由 这是一级路由的出口文件源码 import React, { Component } from 'react'; import { ...
React - 路由 exact 的使用（路由严格匹配）
技术共享，共同进步！
09-02 915
React - 路由 exact 的使用（路由严格匹配）
react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题
qq_42780323的博客
11-08 8975
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。 解决办法，在page.json文件里面增加一行："homepage": "./", 2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。 解决方法： react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径 我的文件位置/WEB/reactdemo, :打开页面浏览器显示的地址：htt.
react-router-dom 和react-router的区别
最新发布
02-16
### 反应路由器域与反应路由器的区别 #### 历史背景与发展 `react-router-dom` 是 `react-router` 的特定实现之一，专门用于浏览器环境中的React应用程序。随着Web开发的发展和技术栈的变化，路由库也经历了迭代更新以适应新的需求和最佳实践。 #### 主要差异点 ##### 1. 环境适配性 `react-router-dom` 特定于DOM环境中运行的应用程序，提供了针对HTML5历史API的支持以及链接处理等功能[^1]。相比之下，`react-router` 更像是一个抽象层，可以被不同平台的具体实现在之上构建，比如服务器端渲染(SSR)，原生移动应用等场景下的变体如 `react-router-native`。 ##### 2. 组件集合的不同 两者都提供核心的路由管理功能，但在具体组件上有所区分： - **Link**: 在 `react-router-dom` 中存在 `<Link>` 组件来创建可点击的超链接，而在更通用版本里可能不存在此预定义组件。 - **BrowserRouter 和 HashRouter**: 这些是专门为客户端web页面设计的历史对象封装器，在 `react-router-dom` 提供了这两种方式让用户选择如何管理和同步URL状态变化；而基础版则不直接涉及这些概念[^2]. ```jsx import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( <Router> {/* 路由配置 */} </Router> ); } ``` ##### 3. API 设计哲学上的微调 虽然二者遵循相同的总体设计理念——即通过声明式的语法描述UI应该如何响应不同的路径匹配情况——但是在某些细节方面还是有细微差别。例如对于动态参数解析、嵌套路由支持等方面可能会有不同的表现形式或额外特性加入到 `react-router-dom` 当中去更好地服务于前端开发者的需求[^4]。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值