• 1401/06/14

import { Link } from "react-router-dom"; :

با سلام استاد گرامی 

کد زیر در زمانی که نوشته می شود خطایی ندارد (کامپایل) اما در browser  چیزی نمایش داده نمی شود :

مشکل اصلی link  است .

در صورتی که لینک نوشته نشود بقیه سورس را نمایش می دهد . و این خطا در INSPECT  نمایش داده می شود.

router.ts:5 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5)
    at useHref (hooks.tsx:32)
    at LinkWithRef (index.tsx:267)
    at renderWithHooks (react-dom.development.js:16305)
    at updateForwardRef (react-dom.development.js:19226)
    at beginWork (react-dom.development.js:21636)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213)
    at invokeGuardedCallback (react-dom.development.js:4277)
    at beginWork$1 (react-dom.development.js:27451)
invariant @ router.ts:5
useHref @ hooks.tsx:32
LinkWithRef @ index.tsx:267
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
router.ts:5 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5)
    at useHref (hooks.tsx:32)
    at LinkWithRef (index.tsx:267)
    at renderWithHooks (react-dom.development.js:16305)
    at updateForwardRef (react-dom.development.js:19226)
    at beginWork (react-dom.development.js:21636)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213)
    at invokeGuardedCallback (react-dom.development.js:4277)
    at beginWork$1 (react-dom.development.js:27451)
invariant @ router.ts:5
useHref @ hooks.tsx:32
LinkWithRef @ index.tsx:267
renderWithHooks @ react-dom.development.js:16305
updateForwardRef @ react-dom.development.js:19226
beginWork @ react-dom.development.js:21636
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:3001/static/js/bundle.js:38952:5)
    at div
    at div
    at NotFound
    at header
    at div
    at div
    at App

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: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
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
router.ts:5 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5)
    at useHref (hooks.tsx:32)
    at LinkWithRef (index.tsx:267)
    at renderWithHooks (react-dom.development.js:16305)
    at updateForwardRef (react-dom.development.js:19226)
    at beginWork (react-dom.development.js:21636)
    at beginWork$1 (react-dom.development.js:27426)
    at performUnitOfWork (react-dom.development.js:26557)
    at workLoopSync (react-dom.development.js:26466)
    at renderRootSync (react-dom.development.js:26434)
import React, { Fragment } from "react";
import { Link } from "react-router-dom";


const NotFound = () => {
   return (
       <Fragment>
           <div id="notfound">
               <div class="notfound">
                   <div class="notfound-404">
                       <h1>404</h1>
                   </div>
                   <h2>شرمنده همچین صفحه ایی نداریم</h2>

                   <Link to="/">
                       <span class="arrow" />
                       برگشت به صفحه اصلی
                   </Link>
               </div>
           </div>
       </Fragment>
   );
};

export default NotFound;
  • 1401/06/18
  • ساعت 20:14

سلام دوست من

اگر مسیردهی میکنید حتما باید توسط router در کامپوننت والد مشخص کنید که در زمانی که آدرس (/) هست چه کامپوننتی باید رندر بشه و بقیه مسیرها به همین صورت بعد Link دادن نباید مشکلی باشه


logo-enamadlogo-samandehi