react-router-domV6踩坑，精准匹配路由失效

已于 2023-03-23 17:26:51 修改
阅读量332 收藏
点赞数
文章标签： react.js 前端 javascript
于 2023-03-23 16:13:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46061574/article/details/129732875
版权

react-router-domV6中的精准匹配不需要使用exact

正确写法：

 

我出错的原因：

访问路由出错了：哈希路由要带'#'进行访问

 

我一直访问的是：

一直跳转的是home页（手动哭泣）

宋怂怂是菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅谈react-router-dom V6的配置使用
webfunny2020的博客
05-09 675
最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）… V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用 一、关于书写方面 路由注册的时候由的Switch改为了Routes //V5版本 import {Route, Switch} from 'react-router-dom
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
安装npm install react-router-cache-route --save# oryarn add react-router-cache-route用法用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由）...
在vite中使用react-router-dom-v6 路由报错 Uncaught SyntaxError: Unexpected token ‘＜‘
marsAphrodite的博客
05-30 2404
如果 在vite中使用react-router-dom v6，并且抽离出路由，结果报错 Uncaught SyntaxError: Unexpected token ‘＜‘ 情况。如下图所示： 在图片中，我将路由模块化，并通过useRoutes进行渲染。 之后在src/App.jsx进行使用时，会爆以下信息： 接下来，我就四处寻找资料，有的都是什么路径错误。此时报错代码如下： import { Route, Routes, NavLink, useRoutes, } from "reac
React路由（V6版本）
鸭绒的博客
03-29 945
文章目录1. 路由介绍2. 路由的使用3. 路由的执行过程4. 编程式导航 React路由学习目标： 能够说出react路由的作用 能够掌握react-router-dom的使用 能够使用编程式导航跳转路由 能够知道react路由的匹配模式 1. 路由介绍 现代的前端应用大多数是SPA（单页面应用），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。 前端路由功能：让用户从一个视图(页面)导航到
react-router-dom示例讲解（六）——未匹配（用于404页面）
weixin_37242696的博客
06-29 2744
前言：倘若一个页面不存在，它就会跳到404页面，针对react即：1、用一个没有path属性的Route（即404页面）去匹配任何路径；2、Switch返回第一匹配成功的Route，只渲染第一个与当前访问地址匹配的<Route>或<Redirect>；实现效果：涉及代码：class App extends Component{ render() { return...
mobx observer导致react-router路由失效的问题
chiuwingyan的博客
08-22 3200
问题描述 在个人项目当中，我使用了mobx作为状态管理，react-router作为前端路由。在这两者配合使用时，我发现了在点击Link进行路由切换的时候，url已经改变了，但是并没有渲染对应的组件，路由切换无效。原代码： router.jsx import React from 'react' import { Route, Redirect, } from 'react...
koa-react-router：用于koa 2的react-router中间件
02-03
npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所...
react-router4按需加载(踩坑填坑)
10-17
主要介绍了react-router4按需加载(踩坑填坑)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
使用React-Router实现前端路由鉴权的示例代码
11-20
React-Router 是React生态系统中的关键组件，用于在前端管理单页应用（SPA）的路由。在传统的Web应用中，路由通常由服务器控制，但随着SPA的流行，前端开始负责处理路由，以提供更流畅的用户体验。React-Router 提供...
react不匹配任意路由解决方案
qq_45523962的博客
05-27 789
出现不匹配“*”，只匹配“/”是因为跳转未定义路由时，优先匹配了“/”根路由 所以只需要在根路由的route或redirect上加exact让他精准匹配即可解决
react-router 显示不了二级页面
weixin_45669496的博客
03-27 252
如果一级是一个真实的页面，再给它设置children，children就不会生效，得单写一个{}react-router 显示不了二级页面。一个{}里面只能有一个真实的页面，
React Router 6
qq_39206750的博客
03-28 1316
Router6 1. 一级路由改动 注册 Route 时必须要包裹 Routes 注册组件中的 component 改为 element //旧版 <Route path={'/home'} component={Home} /> //新版 <Routes> <Route path="/about" element={<About />} /> <Route path="/home" element={<Home />} /> <
配置react路由，发现不管输入什么路径，只能匹配到 / 下
最新发布
m0_65051174的博客
03-31 232
​然后大无语事件发生了，经过我不懈的努力，发现我的配置并没有问题，路径跳转失败是因为路径输入错了，使用HashRouter时URL 中包含哈希值，以我的项目为例： 正常情况url：http://localhost:3000/login 但使用HashRouter 创建路由的 url 为：http://localhost:3000/#/login ​解决办法2： react-router-dom 是 6 版本的，在其官网上，。。。所以也可以改用了 BrowserRouter 组件
解决react-router-dom V6路由嵌套时子路由无法显示的问题
余香
01-16 5613
<Route path="/" element={<NewsSandBox />} /> NewsSandBox组件下的代码: import React from "react"; import { HashRouter, Routes, Route } from "react-router-dom"; import SideMenu from "../../components/sandbox/SideMenu"; import TopHeader from "../../com
react-router-dom V6的配置使用
webfunny2020的博客
05-08 1403
最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）… V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用 一、关于书写方面 路由注册的时候由的Switch改为了Routes //V5版本 import {Route, Switch} from 'react-router-do
【react 中router v6 与 v5 区别】
Clover ‘s Blog
10-23 479
路由
react技术全家桶（43）路由的模糊匹配与严格匹配以及Redirect的使用以及嵌套（多级）路由
weixin_41380194的博客
06-16 332
react路由
react路由配置react-router-dom v6版本
hs1219462412的博客
04-20 4644
一、安装 npm install react-router-dom -S 路由配置: import { hashRouter as Router, Routes, Route } from 'react-router-dom'; // Routes 就是v5版本的 Switch import PageA from './PageA'; // 页面A import PageB from './PageB'; // 页面B ​ export default function App(){ // 启动服务 访
react-router 6 如果匹配不到路由重定向自定义路由方法（[Navigate] is not a ＜Route＞ component........must be a ＜Route＞ .）
CSDN for recording problems
02-20 4332
首先 上面我是想进入到根路由也就是/ 的时候默认重定向到 /projects页面， 但是将 Navigate 定义在 Route 内部会提示错误： 解决办法： <Router> <Routes> <Route path="/projects" element={<ProjectListScreen />}></Route> <Route path="/projects/:projectId/*"

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值