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

已于 2023-03-23 17:26:51 修改
阅读量354 收藏
点赞数
文章标签： 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页。理解新版本的路由规则和正确配置哈希路由是解决问题的关键。
摘要由CSDN通过智能技术生成

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

正确写法：

 

我出错的原因：

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

 

我一直访问的是：

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

宋怂怂是菜鸟
关注
浅谈react-router-dom V6的配置使用
webfunny2020的博客
05-09 687
最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）… V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用 一、关于书写方面 路由注册的时候由的Switch改为了Routes //V5版本 import {Route, Switch} from 'react-router-dom
react-router-domV6版本改版踩坑
HL477的博客
01-15 3606
1.父组件注册路由: v5版本： import { Route } from 'react-router-dom' <Route path="/about" component={About} /> <Route path="/home" component={Home} /> v6版本： import { Route } from 'react-router-dom' <Route path="about" element={<About />} /> &
在vite中使用react-router-dom-v6 路由报错 Uncaught SyntaxError: Unexpected token ‘＜‘
marsAphrodite的博客
05-30 2492
如果 在vite中使用react-router-dom v6，并且抽离出路由，结果报错 Uncaught SyntaxError: Unexpected token ‘＜‘ 情况。如下图所示： 在图片中，我将路由模块化，并通过useRoutes进行渲染。 之后在src/App.jsx进行使用时，会爆以下信息： 接下来，我就四处寻找资料，有的都是什么路径错误。此时报错代码如下： import { Route, Routes, NavLink, useRoutes, } from "reac
React路由（V6版本）
鸭绒的博客
03-29 1012
文章目录1. 路由介绍2. 路由的使用3. 路由的执行过程4. 编程式导航 React路由学习目标： 能够说出react路由的作用 能够掌握react-router-dom的使用 能够使用编程式导航跳转路由 能够知道react路由的匹配模式 1. 路由介绍 现代的前端应用大多数是SPA（单页面应用），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。 前端路由功能：让用户从一个视图(页面)导航到
react-router-dom示例讲解（六）——未匹配（用于404页面）
weixin_37242696的博客
06-29 2781
前言：倘若一个页面不存在，它就会跳到404页面，针对react即：1、用一个没有path属性的Route（即404页面）去匹配任何路径；2、Switch返回第一匹配成功的Route，只渲染第一个与当前访问地址匹配的&lt;Route&gt;或&lt;Redirect&gt;；实现效果：涉及代码：class App extends Component{ render() { return...
mobx observer导致react-router路由失效的问题
chiuwingyan的博客
08-22 3219
问题描述 在个人项目当中，我使用了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应用中，使用react-router进行路由管理时，按需加载（也称为代码分割）可以实现只加载用户当前需要访问的页面模块，而不是一次性加载所有模块。React Router 4提供了组件级别的代码分割功能，本文将介绍如何...
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-...
mobx-react-router:使MobX状态与react-router保持同步
04-22
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的，因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发（并复制自） 。 该分支（主节点）与react-...
React子路由由于不懂react-route中Outlet不显示
Ricale的博客
01-05 1514
最近搭了一个layout布局，由于之前没有尝试过，在搭建过程中遇到了子路由不显示的问题，路由如下。经过搜索才明白需要在layout组件中添加Outlet组件去表明子路由渲染的位置，如下。页面只显示了layout组件的内容，但home组件内容没有渲染。
react不匹配任意路由解决方案
qq_45523962的博客
05-27 808
出现不匹配“*”，只匹配“/”是因为跳转未定义路由时，优先匹配了“/”根路由 所以只需要在根路由的route或redirect上加exact让他精准匹配即可解决
react-router 显示不了二级页面
weixin_45669496的博客
03-27 295
如果一级是一个真实的页面，再给它设置children，children就不会生效，得单写一个{}react-router 显示不了二级页面。一个{}里面只能有一个真实的页面，
React Router 6
qq_39206750的博客
03-28 1350
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 247
​然后大无语事件发生了，经过我不懈的努力，发现我的配置并没有问题，路径跳转失败是因为路径输入错了，使用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 5705
<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 1467
最近在搭建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 525
路由
react技术全家桶（43）路由的模糊匹配与严格匹配以及Redirect的使用以及嵌套（多级）路由
weixin_41380194的博客
06-16 361
react路由
react-router-domv6动态路由
最新发布
09-07
首先，确保你已经安装了`react-router-dom`版本6及以上。 ```jsx import { BrowserRouter, Route, Routes } from 'react-router-dom'; function App() { return ( <Route path="/" element={<Home />} /> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值