React项目中调用useNavigate出现报错问题求助

从react-router-dom导入{ useNavigate }时项目运行正常，但执行let navigate = useNavigate();语句后项目崩溃，报错信息如下：

react_devtools_backend.js:4026 The above error occurred in the <App> component:

    at App (http://localhost:3000/main.275edd721dcd59139133.hot-update.js:41:84)

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.
overrideMethod @ react_devtools_backend.js:4026
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
scheduleRefresh @ react-dom.development.js:27795
renderer.scheduleRefresh @ react_devtools_backend.js:6514
(anonymous) @ react-refresh-runtime.development.js:304
performReactRefresh @ react-refresh-runtime.development.js:293
(anonymous) @ RefreshUtils.js:85
setTimeout (async)
enqueueUpdate @ RefreshUtils.js:83
executeRuntime @ RefreshUtils.js:243
$ReactRefreshModuleRuntime$ @ App.js:72
./src/App.js @ App.js:72
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
_requireSelf @ hot module replacement:102
apply @ jsonp chunk loading:444
(anonymous) @ hot module replacement:344
internalApply @ hot module replacement:342
(anonymous) @ hot module replacement:279
waitForBlockingPromises @ hot module replacement:233
(anonymous) @ hot module replacement:277
Promise.then (async)
(anonymous) @ hot module replacement:276
Promise.then (async)
(anonymous) @ hot module replacement:256
Promise.then (async)
hotCheck @ hot module replacement:247
check @ dev-server.js:13
(anonymous) @ dev-server.js:55
emit @ events.js:153
reloadApp @ reloadApp.js:46
warnings @ index.js:227
(anonymous) @ socket.js:60
client.onmessage @ WebSocketClient.js:50

错误原因分析 #

• 组件未在路由上下文内：useNavigate是React Router提供的钩子，必须在被<BrowserRouter>（或<HashRouter>等路由容器组件）包裹的组件中使用。如果你的<App>组件没有被路由上下文包裹，调用该钩子就会触发错误。
• 违反React钩子规则：确保useNavigate()是在函数组件的顶层作用域调用的，不能放在条件判断、循环、嵌套函数或者类组件中，否则会违反React钩子的使用规则。
• React Router版本不匹配：useNavigate是react-router-dom v6版本新增的API，如果你的项目使用的是v5及以下版本，这个钩子不存在，自然会报错。检查package.json里的依赖版本，确认是v6及以上。

内容的提问来源于stack exchange，提问作者Ankitgiri2411