关于react-router中点击路由跳转，找不到路由组件的问题

最新推荐文章于 2023-05-10 14:56:27 发布
最新推荐文章于 2023-05-10 14:56:27 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： react 文章标签： react 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39648402/article/details/102935112
版权

使用嵌套路由在父级不能用exact， 因为当你匹配路由时路径加了子路由，导致父级路由路径不匹配从而父子组件都显示不了。例如你这个/user/details 使用了exact，当路径变为/user/details/msg是匹配不到/user/details的，这样的话就无法渲染Details而msg又是在Detail里面所以也不会渲染

暖暖小时光
关注
专栏目录
react 路由 编程式导航跳转 只有一个小组件没有 Route， 获取不到相关 api，如何跳转？（react-router-dom / push / withRouter）
北芒的博客
07-16 554
前言 声明式导航： <Route path='/Web' component={Web}></Route> 直接于react 自带的 Route 中跳转 编程式导航： this.props.history.push("/home") 采用 js 的形式进行跳转 编程式导航包括： 1 push props.history.push('/singer') //跳转目标 2 replace props.history.replace({pa.
react-router-dom 实现路由跳转
南思琼海
06-10 1万+
简单的写了一个移动呈现，底部tabbar跳转的demo 简述 demo 使用 create-react-app 直接创建 路由是使用 react-router-dom 目录结构 稍微改变一下 create-react-app 创建后的src目录， 这里目录和vue相似 index.js 中不做改变 App.js App.js 中 使用 react-router-dom 检测地址 检索 ...
【React】react-router-dom 进行路由跳转组件不显示问题
热门推荐
不忘初心，坚定道路！
06-05 1万+
场景 使用孙路由跳转父路由时，无论用Link to 还是this.props.history.push跳转，Url地址栏都变了，但是页面组件加载不出来，页面未刷新。点击父路由上的Link to ，同样跳转位置，URL不变，页面未刷新，但是组件加载了。 在跳转处以及目标路由处查看this.props发现，跳转后this.props.history已经变成跳转后路由，但是this.props.loc...
react 路径跳转组件不跳转_react-router路由配置问题，无法跳转到预期的组件？
weixin_35555014的博客
02-04 696
目前组件有三个：Login、Home、NoMatch404预期：访问:localhost:3000时自动跳到Login，登录成功自动跳到Home，如果输入localhost:3000/aaa应该跳到NoMatch404问题：所有跳转都被NoMatch404拦截了，请问该如何配置NoMatch404组件路由配置代码如下import React from 'react'import { HashRou...
react组件获取不到路由信息
qq_43477721的博客
01-20 1065
添加如下的代码 import { withRouter } from "react-router-dom" // ..... export default withRouter(AuthRoute) 之前是使用 @withRouter 这样的装饰器，但是项目一直报错 Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled 网上百度了很久，没办法解决。后来就采用这个方法，效果是一样的 import a
react router 点击路由菜单后菜单消失，路由组件不显示问题
lingliu0824的博客
05-07 1492
期望效果： 点击头部菜单，下面显示对应的路由组件。 问题：点击菜单后，菜单消失，也没有相应的路由组件显示，效果如下： 原因：父级路由的exact设置了值为true： 设置父级的exact参数为false： ...
react-router JS 控制路由跳转实例
10-19
这两种方法都可以实现非用户点击`Link`时的路由跳转，但使用`context`的方法可能会因React版本和React Router版本的变动而不稳定，因此推荐使用`browserHistory.push`。 **3. 更复杂的路由配置** 除了简单的路径...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
在本文中，我们将深入探讨一个关于`react-router-dom` v4版本中的`history`对象无法访问的问题及其解决方案。 在升级到`react-router-dom` v4后，开发者可能会遇到在子组件中通过`this.props.history`无法获取到`...
使用React-Router实现前端路由鉴权的示例代码
11-20
React-Router 是React生态系统中的关键组件，用于在前端管理单页应用（SPA）的路由。在传统的Web应用中，路由通常由服务器控制，但随着SPA的流行，前端开始负责处理路由，以提供更流畅的用户体验。React-Router 提供...
React 路由 踩坑 编程式路由失效
胡乱选一个
05-28 1781
React 路由 踩坑 编程式路由失效 遇到的问题 当在路由组件里面使用函数式编程 路由时会无法跳转 但浏览器地址已经更改。 问题原因 书写了多个<BrowserRouter></BrowserRouter>标签导致 问题详细描述 首先我在App组件里面已经书写了<BrowserRouter></BrowserRouter>标签，然后我跳转到Message组件，在Message组件再次跳转时又写了一层<BrowserRouter><
react的props中找不到路由信息
管他熙熙攘攘阳关道，我偏要一条独木桥走到黑
01-24 734
const { location } = this.props console.log('location :',location ) 发现location 为undefined 解决： （1）组件包裹在中 （2）组件中引用 withRouter import { withRouter } from 'react-router-dom' @withRouter class MyComponentxxx extends Component {... ...
webpack配置的react-router中url中路由跳转找不到资源页面
MFWSCQ的博客
09-23 1692
自己配置webpack开发react+react-router项目时，路由匹配出现问题，定位到是webpack配置的问题。 就以react-router中的官方示例作为例子 这个例子中路由默认是Home，当点击About时，进入/about的路由： 但是当自己光标在地址栏按下enter键或者刷新页面的时候，或者手动输入地址栏的/about后，就出现了请求不到资源的提示： 出现这...
react-router 嵌套路由 内层route找不到
weixin_30642267的博客
01-31 480
今天在做嵌套路由的时候，没有报错，但是页面显示为空，搜索了一下资料，有两个原因： 1.exact精确匹配 <Route component={xxx} path="/" /> 　路径为“/”的时候用了exact精确查找，所以不会查找到页面的嵌套路由 2.路由的顺序： 去除了exact之后，无论进哪个页面都是“/”对应的页面，这个时候，只需要把路由的顺序调整一下，...
Vue多级路由重定向以及父级样式丢失的问题。
someWhere_weMeet的博客
07-25 2883
公司整了一下午，被Vue的多级重定向绕晕了。回来静了下，终于解决了。好好记录下来。 先看看html结构图 上面这个是一级路由跳转的；下面这个是二级跳转的； 需要注意： *** ***上图的标记1，to里加了'/',表示根据根路径跳转的；而下图的标记3，to没有加'/',表示根据当前页面的相对路径跳转的。这里借鉴了这位盆友的关于重定向redirect解读：https://blog.csd...
react子组件点击按钮hashRouter路由跳转
react子组件点击按钮hashRouter路由跳转
03-06 5253
关于react使用hashRouter父子组件中子组件点击按钮后路由跳转) HashRouter基本代码 &amp;lt;HashRouter&amp;gt; &amp;lt;Routers history={history}&amp;gt; &amp;lt;Route exact path=&quot;/&quot; component={Index}/&amp;gt; &amp;lt;Route path=&am
路由组件
m0_57076093的博客
07-14 1735
VueRouter的基本概念 文档 如果我们想要使用路由，则需要引入vue-router.js vue-router地址 路由组件 路由组件在创建时，和普通组件一样，只是在使用时不同，路由组件需要被放在路由配置中(routes) 路由配置 我们如果想要让我们的网页在访问不同地址显示不同的内容，则需要使用路由配置去配置对应的路由 路由对象 我们通过new VueRouter可以创建出来一个router对象，我们称其为路由对象，路由对象中可以实现相关的路由跳转 视图 router-view 是一个组件的名字，未
react-router页面刷新之后嵌套路由找不到的坑
问白的博客
03-14 9073
刷新之后嵌套路由找不到 最近遇到一个react路由配置的一个小坑，在复杂web应用过程中坑定都是需要配置嵌套路由来实现单页应用。 但发现，在嵌套路由的某个子页面中刷新页面，会找不到和当前路由匹配的单页。 后来发现是匹配中都是严格模式匹配，导致嵌套路由匹配不上。 代码如下： &lt;Route exact path='/' component={Home} /&gt; &lt;Route exa...
React中的路由/导航模块
hdj0511的博客
10-14 207
React中的路由/导航模块
路由跳转，router-view不显示组件页面的几个可能出现的问题及解决方案
最新发布
weixin_60196946的博客
05-10 2667
路由跳转，router-view不显示组件页面的几个可能出现的问题及解决方案
react-router-dom路由跳转
03-16
React-router-dom使用Link组件实现路由跳转，示例代码： ``` import { Link } from 'react-router-dom' function App() { return ( 首页 关于 ) } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值