程序员经验分享-hwhale

react-router-dom错误

2023-05-16

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)
    at mountIndeterminateComponent (react-dom.development.js:20838)
    at beginWork (react-dom.development.js:22342)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206)
    at invokeGuardedCallback (react-dom.development.js:4270)
    at beginWork$1 (react-dom.development.js:27243)
invariant @ index.tsx:24
useLocation @ index.tsx:401
App @ App.tsx:18
renderWithHooks @ react-dom.development.js:16141
mountIndeterminateComponent @ react-dom.development.js:20838
beginWork @ react-dom.development.js:22342
callCallback @ react-dom.development.js:4157
invokeGuardedCallbackDev @ react-dom.development.js:4206
invokeGuardedCallback @ react-dom.development.js:4270
beginWork$1 @ react-dom.development.js:27243
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
performSyncWorkOnRoot @ react-dom.development.js:25924
flushSyncCallbacks @ react-dom.development.js:11982
flushSync @ react-dom.development.js:26040
legacyCreateRootFromDOMContainer @ react-dom.development.js:29309
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29335
render @ react-dom.development.js:29419
./src/index.tsx @ index.tsx:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(匿名) @ startup:7
(匿名) @ startup:7
react-dom.development.js:18525 The above error occurred in the <App> component:

    at App (http://localhost:3000/static/js/bundle.js:41:79)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18525
update.callback @ react-dom.development.js:18558
callCallback @ react-dom.development.js:13092
commitUpdateQueue @ react-dom.development.js:13113
commitLayoutEffectOnFiber @ react-dom.development.js:23204
commitLayoutMountEffects_complete @ react-dom.development.js:24461
commitLayoutEffects_begin @ react-dom.development.js:24447
commitLayoutEffects @ react-dom.development.js:24385
commitRootImpl @ react-dom.development.js:26651
commitRoot @ react-dom.development.js:26517
performSyncWorkOnRoot @ react-dom.development.js:25956
flushSyncCallbacks @ react-dom.development.js:11982
flushSync @ react-dom.development.js:26040
legacyCreateRootFromDOMContainer @ react-dom.development.js:29309
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29335
render @ react-dom.development.js:29419
./src/index.tsx @ index.tsx:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(匿名) @ startup:7
(匿名) @ startup:7
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)
    at mountIndeterminateComponent (react-dom.development.js:20838)
    at beginWork (react-dom.development.js:22342)
    at beginWork$1 (react-dom.development.js:27219)
    at performUnitOfWork (react-dom.development.js:26392)
    at workLoopSync (react-dom.development.js:26303)
    at renderRootSync (react-dom.development.js:26271)

使用 useLocation 的组件必须放在 BrowserRouter里

这样：

    <BrowserRouter>

    <App />

    </BrowserRouter>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

Router

DOM

react-router-dom错误 的相关文章

随机推荐

  • Arch的VBox安装笔记

    Arch Version archlinux 2015 12 01 dual Virtual Box Version 5 0 16 r105871 Update xff1a 2016 03 26 17 08 18 1 分区 xff08 cf

  • Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file

    maven打包报错 org springframework boot maven BuildInfoMojo hasbeen copiled by a more recent version of the Java Runtime clas

  • 前端JS接收服务端的二进制文件流实现文件下载

    前端JS接收服务端的二进制文件流实现文件下载 var binaryData 61 binaryData push res 改成Boole或者file类型 const url 61 window URL createObjectURL new

  • debian10ssh配置用户限制，日志等

    需求 xff1a 工作端口为2021 xff1b 只允许用户user01 xff0c 密码ChinaSkill21登录到router 其他用户 xff08 包括root xff09 不能登录 xff0c 创建一个新用户 xff0c 新用户可

  • CentOS搭建PySpider爬虫服务

    1 环境准备 前置环境部署 在开始部署前 xff0c 我们需要做一些前置准备 yum 更新 yum span class hljs operator span class hljs keyword update span y span 安装

  • openGauss5.0企业版CentOS单节点安装

    目录 一 安装环境 二 前置依赖包 三 安装前准备1 四 安装前准备2 五 安装 一 安装环境 CPU xff1a 2核 内存 xff1a 4G 磁盘 xff1a 20G 操作系统 xff1a CentOS 7 9 python版本 xff

  • SpringBoot+PageHelper+Bootstrap+Thymeleaf 实现分页功能

    本文针对那种想要快速实现功能 xff0c 而不是研究原理的 xff0c 那你就直接复制我的东西 xff0c 运行就好 如果想深入学习的同学请另行百度 第一种 Spring Boot 43 Thymeleaf 使用PageHelper实现分页

  • Idea集成使用SVN教程

    idea 从项目窗口跳到打开项目选项窗口 操作之后即可跳到如下界面 第一步 下载svn的客户端 xff0c 通俗一点来说就是小乌龟啦 xff01 官网下载地址 xff1a Downloads TortoiseSVN 下载之后直接安装就好了

  • IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结

    IntelliJ IDEA 下的svn配置及使用的非常详细的图文总结 请叫我大师兄 CSDN博客 ideasvn配置 https blog csdn net qq 27093465 article details 74898489 首先 x

  • webpack 错误

    1 ERROR in src main css Module build failed from node modules mini css extract plugin dist loader js ReferenceError docu

  • 客户端js 读取 json 数据

    采用 XMLHttpRequest 读取 1 new 初始化 XMLHttpRequest 2 open 设置请求方式 xff0c 地址 3 send 发起请求 4 onload 请求成功 xff0c 返回结果 代码 xff1a lt DO

  • dataTable的中文文档

    DataTables Table plug in for jQuery https datatables net 用google 打开 xff0c 直接翻译 参考 选项 DataTables 及其扩展是极其可配置的库 xff0c 它们对 H

  • nodejs核心API

    1 Buffer对象 不需要引入 Bufferd对象用途 以二进制流进行数据的传送传递 1 三种创建方式 类似于数组的创建 用16进制存储 let buf1 61 Buffer alloc 20 13 console log buf1 lt

  • mysql select， from ，join ，on ，where groupby,having ,order by limit的执行顺序和书写顺序

    mysql select xff0c from xff0c join xff0c on xff0c where groupby having order by limit的执行顺序和书写顺序 关键字或 解释执行顺序select 查询列表 x

  • jQuery对checkbox的各种操作

    注意 xff1a 操作checkbox的checked disabled属性时jquery1 6以前版本用attr 1 6以上 xff08 包含 xff09 建议用prop 1 根据id获取checkbox 34 cbCheckbox1 3

  • dom 操作排他思路

    1 遍历所有 xff0c 操作 xff0c 对具体的重新操作 实现点击一个按钮就把背景颜色改为pink颜色 lt DOCTYPE html gt lt html lang 61 34 en 34 gt lt head gt lt meta

  • web前端兼容

    兼容性 xff1a Compatibility overview https www quirksmode org compatibility html 当前测试 CSS所有 CSS 选择器和声明 xff08 最终 xff09 DOM所有

  • 使用跨域资源共享的 DOM 访问控制

    Dev Opera DOM Access Control Using Cross Origin Resource Sharing https dev opera com articles dom access control using c

  • react-typescript 错误

    64 types jsurl index d ts 39 is not a module npm i jsurl 安装错误 xff0c 因为 typescript无法用此方法安装 xff0c 卸载干净 1 增加types目录 新建jsurl

  • react-router-dom错误

    index tsx 24 Uncaught Error useLocation may be used only in the context of a lt Router gt component at invariant index t

热门标签