useHref() may be used only in the context of a ＜Router＞ component

最新推荐文章于 2024-03-25 00:00:00 发布
最新推荐文章于 2024-03-25 00:00:00 发布
阅读量881 收藏
点赞数
分类专栏： 前端 html 文章标签： vue.js typescript javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54883970/article/details/123265992
版权
前端 同时被 2 个专栏收录
47 篇文章 3 订阅
订阅专栏
html
47 篇文章 0 订阅
订阅专栏

报错原因

useHref() 只能在 <Router> 组件的上下文中使用。
在这里插入图片描述
因为在 Router 组件外面使用了 Link 组件，所以导致报错。

解决方法

将其删除掉，因为该组件已经交给路由组件负责渲染了。
在这里插入图片描述

m0_54883970
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React报错之useNavigate() may be used only in context of Router
「 虚幻私塾」
08-09 2232
比如说，当用户登录后，你不想让用户能够点击回退按钮，再次回到登录页面。换句话说，由这种方式导航到新的路由，不会在浏览器历史堆栈中推入新的条目。一旦你的整个应用都被Router组件所包裹，你可以随时随地的在组件中使用react router所提供的钩子。钩子使用了Router组件提供的上下文，所以它必须嵌套在Router里面。用Router组件包裹你的React应用程序的最佳位置是在你的。时，浏览器历史堆栈中的当前条目会被新的条目所替换。文件中，因为那是你的React应用程序的入口点。函数的参数与组件上的。.
浅析React Router V6 useRoutes的使用
m0_67403272的博客
03-07 1574
本篇文章记录了useRoutes第一个参数的使用方法，暂不涉及第二个参数。 文章目录 一、使用位置 二、嵌套路由 三、分模块管理 注意事项 一、使用位置 一开始以为可以像react-router-config那样使用，于是写成 import { BrowserRouter as Router, useRoutes } from 'react-router-dom'; const SetRoutes = () => { const routes = useRoutes([ {
useHref() may be used only in the context of a ＜Router＞ component.
bidang3275的博客
09-09 8966
报错原因 useHref() 只能在 <Router> 组件的上下文中使用。 因为在 Router 组件外面使用了 Link 组件，所以导致报错。 解决方法 将其删除掉，因为该组件已经交给路由组件负责渲染了。
3router.ts:5 Uncaught Error: useHref() may be used only in the context of a ＜Router＞ component.
weixin_44833870的博客
05-03 1278
React 使用<Link>链接报错，需要在最外层再包裹一层BrowserRouter标签，即App.tsx配置。 import React, { Component, useState, useEffect,Context } from 'react'; import './App.css'; import MonthPicker from './04-base/04Article' import { BrowserRouter } from 'react-router-dom'; fu
React路由问题Uncaught Error: useLocation() may be used only in the context of a ＜Router＞ component.
m0_64332518的博客
10-09 788
【代码】React路由问题Uncaught Error: useLocation() may be used only in the context of a ＜Router＞ component.
react-router-dom错误
qq_27009517的博客
04-09 3089
index.tsx:24 Uncaught Error: useLocation() may be used only in the context of a <Router> component. at invariant (index.tsx:24) at useLocation (index.tsx:401) at App (App.tsx:18) at renderWithHooks (react-dom.development.js:16141) ...
Vue 中 keep-alive 组件与 router-view 组件的那点事
vv_bug
12-01 3648
最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。 keep-alive <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra
Vue品牌列表按键修饰符
mqingo的博客
01-04 480
07品牌列表按键修饰符.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0
useLocation()只能在＜Router＞组件的上下文中使用。
skylar的博客
07-03 1540
【代码】useLocation()只能在组件的上下文中使用。
useRoutes() may be used only in the context of a ＜Router＞ component.
热门推荐
m0_47531829的博客
02-11 1万+
使用react中的router v6版本踩坑记录。 按照A is only ever to be used as the child of element, never rendereddirectly.Please wrap your in a 这篇文章设置完最新版本的路由后，出现了这样的报错，useRoutes() may be used only in the context of a <Router> component.，经过查询之后，从这里找到了解决答案，useRoutes(
react-router-dom 6.x useNavigate() may be used only in the context of a ＜Router＞ component
weixin_59141333的博客
01-10 3188
Uncaught Error: useNavigate() may be used only in the context of a component. 未捕获错误:useNavigate()只可以用在<路由器>上下文的组件中。 原因：导航组件写到外面了！！！ 解决方法： 把要导航跳转的组件写到里面 如下假设： Header组件中有类似点击按钮等导航跳转操作，就需要将Header组件写到BrowserRouter的里边： Footer组件无类似操作，所以写到BrowserRouter的外边了
报错useHref() may be used only in the context of a ＜Router＞ component.
weixin_42211302的博客
11-04 788
react初学，route报错
useNavigate() may be used only in the context of a ＜Router＞ component.
慢慢manman的博客
10-11 5860
第一步：将index.js文件React应用包裹到Router中的例子，整个应用都会被Router组件所包裹，之后就可以随时随地的在组件中使用react router所提供的钩子。警告，是因为useNavigate只能在Router上下文中使用useNavigate 钩子。在react项目中配置路由，使用编程式导航。函数用来实现编程导航的跳转时。第二步：在组件中正常使用。
React 学习笔记 - react router v6 hooks
绿胡子大叔的博客
03-31 2449
React 学习笔记 - react router v6 hooks前言详解useHref功能示例useInRouterContext功能useLocation功能useMatch功能useNavigate功能示例useNavigationType功能useOutlet功能useParamsuseSearchParams功能useResolvedPath功能useRoutes功能参考文档 前言 目前正在学习react router，了解到v5和v6版本具有较大差异。本文将结合源代码详细说明react rou
react-router6常规路由器、hook详解
最新发布
局外人LZ的博客
03-25 1532
react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。
React 报错 Error: useRoutes() may be used only in the context of a ＜Router＞ component
清云
03-31 7367
Error: useRoutes() may be used only in the context of a component
You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored
07-16
In React Router, it is indeed not recommended to use both the `component` and `children` props in the same `<Route>` component. If you provide both props, the `component` prop will be ignored, and ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值