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错误 的相关文章