React 路由 踩坑 编程式路由失效

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

React 路由 踩坑 编程式路由失效

遇到的问题

当在路由组件里面使用函数式编程 路由时会无法跳转 但浏览器地址已经更改。

问题原因

书写了多个<BrowserRouter></BrowserRouter>标签导致

问题详细描述

首先我在App组件里面已经书写了<BrowserRouter></BrowserRouter>标签，然后我跳转到Message组件，在Message组件再次跳转时又写了一层<BrowserRouter></BrowserRouter>标签，导致了编程式路由的跳转失败。

解决办法

将路由组件的<BrowserRouter></BrowserRouter>删除，只在App组件包裹即可。

目录结构
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

阿宽pi
关注
专栏目录
解决使用vue.js路由后失效的问题
11-29
且之前用jquery写的一些效果也失效了.最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的) 附上部分代码 <!DOCTYPE html> <html> <head> <meta ...
关于react-router中点击路由跳转，找不到路由组件的问题
sinat_39648402的博客
11-06 2409
使用嵌套路由在父级不能用exact， 因为当你匹配路由时路径加了子路由，导致父级路由路径不匹配从而父子组件都显示不了。例如你这个/user/details 使用了exact，当路径变为/user/details/msg是匹配不到/user/details的，这样的话就无法渲染Details而msg又是在Detail里面所以也不会渲染 ...
react router嵌套路由不生效
最新发布
Zhuang_weixin的博客
10-27 452
App.jsx 文件，想路径为 /home/recommend 展示 HomeRecommend 组件。解决：在父组件使用 Outlet 占位。@蚵仔煎-20231027。Home.jsx 文件。
react——路由加载失效
weixin_39031806的博客
04-23 1413
需求路由动态加载组件 <Route path="/index/" exact component={AddArticle} /> <Route path="/index/add" exact component={AddArticle} /> <Route path="/index/add/:id" exact component={AddArticle} /&g...
keep-alive 缓存页面不生效的三种原因
热门推荐
weixin_49336005的博客
09-07 1万+
Keep-Alive不生效的三种原因及解决办法
解决React编程式导航无法跳转：react router Cannot read properties of undefined (reading ‘push‘)
m0_72919073的博客
11-15 783
没办法通过 this.props.children 取得当前组件的子元素。因为this.props.children 返回的是组件拥有者传递给你的 passed onto you 子节点。使用withRouter包裹当前组件。
react路由点击不跳转
weixin_49662044的博客
09-25 456
警告意思是父路由路径没有尾随“ *”。这意味着如果您导航得更深，则父路由器将不再匹配，因此子路由器将永远不会呈现。后台管理系统中，配置好路由之后，点击菜单栏跳转路由，跳转之后会将不显示菜单栏以及头部底部区域。然后在需要展示路由的地方写上。
React采坑日记——做项目中遇到的坑
qq_56989560的博客
07-11 960
React——做项目中遇到的坑
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
另一种方法，如描述中提到的，是使用`provide`和`inject`这对组合，它允许我们在组件树中跨级传递非响应式的数据。 在`App.vue`的根组件中，我们可以定义一个`reload`方法，并通过`provide`将其提供给子组件。然后...
keep-alive不能缓存多层级路由菜单问题解决
10-15
这个问题通常发生在三层及以上的路由结构中，即一级、二级路由能够正常缓存，但三级及以下的路由菜单则无法被缓存。 出现这种情况的原因在于Vue Router的`router-view`组件嵌套。当我们在不同层级的`router-view`...
记一次react前端项目打包优化的方法
10-15
React Loadable是一个用于按需加载React组件的库，它可以根据路由来切割资源。通过将原本一次性加载的组件，如Dashboard，转换为使用Loadable包装，当用户导航到对应路由时，组件才会动态加载，显著减少了初始加载时...
IOS React等Title不显示问题解决办法
01-20
这在大多数情况下并无问题，但当应用需要在不同路由或状态间切换时，用户可能期望看到对应的页面标题。 在iOS的Safari和微信内置浏览器中，它们在加载页面时会记录首次设置的`document.title`，后续的`document....
react-keepalive-router:基于react 16.8 +开发的react缓存组件，react router 4 +可用于缓存页面组件，类似于Vue keepalive包Vue路由器效果功能。（基于react 16.8 +，react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的Keepalive包装vue-router的效果功能）
03-18
采用react hooks全新api ，支持缓存路由，手动解除缓存，增加了缓存的状态周期，监听函数等。 后续版本会完善其他功能。 演示 缓存组件+监听 二快速上手 下载 npm install react-keepalive-router --save # or yarn ...
react-submit:react 淘宝返利项目
05-06
使用 react-router-dom 实现路由 √3.使用 props-type 做属性检查 √4.搭建 mock server 模拟数据请求 √5.使用 redux 实现状态管理 √6.使用 Immutable7.项目中添加异步请求 √8.redux-thunk 中间件使用 √项目使用...
React-cocktails-project
04-04
在这个项目中，开发者可能会遇到与React Router相关的修复问题，例如导航失效、页面加载错误等。`create-react-app` (CRA) 是Facebook推出的官方脚手架，用于快速搭建React应用，而"build": "CI= react-scripts ...
React-Router做路由，打包出来的静态文件丢到Tomcat里路由不生效，刷新页面404两个错误
qssn的博客
02-07 5321
有些开发er可能会想把做好的react项目，打包出来的静态文件丢到tomcat上测试，然后发现自己的路由怎么不生效了？？ 页面不进行加载了。  第二个就是但是当我们刷新一下浏览器，或者打开一个不存在的页面的时候 路由不加载（都是路径惹的祸）  首先，看一下自己的本地路径是不是这个样子的： http://localhost:8888/home 然而丢到tomcat的webap
react路由无法跳转（To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function）
weixin_43295106的博客
10-25 2185
//问题：每次提交表单成功后跳转路由都回马上返回登陆页（手机必定出现，pc不出现） //react提示error：Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEff
react 路径跳转组件不跳转_react-router路由配置问题，无法跳转到预期的组件？
weixin_35555014的博客
02-04 694
目前组件有三个：Login、Home、NoMatch404预期：访问:localhost:3000时自动跳到Login，登录成功自动跳到Home，如果输入localhost:3000/aaa应该跳到NoMatch404问题：所有跳转都被NoMatch404拦截了，请问该如何配置NoMatch404组件路由配置代码如下import React from 'react'import { HashRou...
解决react路由点击不跳转，不报错，但URL地址会变化的问题
qq_45532769的博客
11-12 1310
解决react路由点击不跳转，不报错，但URL地址会变化的问题
react编程式路由跳转
04-15
可以使用React Router库中的history对象进行编程式路由跳转。比如要跳转到路径为'/dashboard'的页面，可以使用以下代码： ```jsx import { useHistory } from 'react-router-dom'; function MyComponent() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值