با سلام استاد گرامی
کد زیر در زمانی که نوشته می شود خطایی ندارد (کامپایل) اما در 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;
سلام دوست من
اگر مسیردهی میکنید حتما باید توسط router در کامپوننت والد مشخص کنید که در زمانی که آدرس (/) هست چه کامپوننتی باید رندر بشه و بقیه مسیرها به همین صورت بعد Link دادن نباید مشکلی باشه