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(使用前将#替换为@)