Проблема в ссылке и в реакции и реакции маршрутизатора

Я новичок в React.js. Мой проблема всякий раз, когда я использую <Link to = "/"> вместо <a href = "/">, моя страница становится пустой, и я до сих пор не могу понять, что происходит и почему я не могу использовать <Link> если я использую <a href = "/">, то страница отображается

импорт { BrowserRouter как Router, Link, Маршруты, Маршрут } из "react-router-dom";

import PropTypes from "prop-types";
import { Link } from "react-router-dom";
export default function Navbar(props) {
  return (
    <nav className = {`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
      <div className = "container-fluid">
        <Link className = "navbar-brand" to = "/">
          {props.title}
        </Link>
        <button
          className = "navbar-toggler"
          type = "button"
          data-bs-toggle = "collapse"
          data-bs-target = "#navbarSupportedContent"
          aria-controls = "navbarSupportedContent"
          aria-expanded = "false"
          aria-label = "Toggle navigation"
        >
          <span className = "navbar-toggler-icon"></span>
        </button>
        <div className = "collapse navbar-collapse" id = "navbarSupportedContent">
          <ul className = "navbar-nav me-auto mb-2 mb-lg-0">
            <li className = "nav-item">
              <Link className = "nav-link active" aria-current = "page" to = "/">
                Home
              </Link>
            </li>
            <li className = "nav-item">
              <Link className = "nav-link" to = "/about">
                {/* {props.aboutText} */}
                about
              </Link>
            </li>
          </ul>
          <div className = "form-check form-switch">
                <input className = "form-check-input" onClick = {props.togglemode} type = "checkbox" role = "switch" id = "flexSwitchCheckDefault"/>
                <label className = {`form-check-label text-${props.mode === "light"?"dark":"light"}`} htmlFor = "flexSwitchCheckDefault">Enable Dark Mode</label>
            </div>  
        </div>
      </div>
    </nav>
  );
}
Navbar.proptype = { title: PropTypes.string, aboutText: PropTypes.string };

Navbar.defaultProps = {
  title: "Yahan pe compnay name", aboutText: "yahan pe about dalna ha " 
}

в app.js у меня есть

    <>
      <Navbar title = "Awais" aboutText = "About Us" mode = {mode} togglemode = {togglemode}/>
      <Alert alert = {alert}/>
      <Router>
      <div className = "container">
        <Routes>
          <Route exact path = "/" element = {<TextForm showAlert = {showAlert} heading = "Enter the text to analyze below" mode = {mode}/>}/>
          <Route exact path = "/about" element = {<About myStyle = {myStyle}></About>}/>
        </Routes>
        </div>
    </Router>
    </>
  );```

***

> and error that I have in my console are

*** 

index.tsx:24 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (index.tsx:24:1)
    at useHref (index.tsx:358:1)
    at LinkWithRef (index.tsx:263:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateForwardRef (react-dom.development.js:17044:1)
    at beginWork (react-dom.development.js:19098:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)
invariant @ index.tsx:24
useHref @ index.tsx:358
LinkWithRef @ index.tsx:263
renderWithHooks @ react-dom.development.js:14985
updateForwardRef @ react-dom.development.js:17044
beginWork @ react-dom.development.js:19098
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react-dom.development.js:20085 The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:3000/static/js/bundle.js:37135:5)
    at div
    at nav
    at Navbar (http://localhost:3000/static/js/bundle.js:557:56)
    at App (http://localhost:3000/static/js/bundle.js:43:78)

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:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
2react-dom.development.js:20085 The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:3000/static/js/bundle.js:37135:5)
    at li
    at ul
    at div
    at div
    at nav
    at Navbar (http://localhost:3000/static/js/bundle.js:557:56)
    at App (http://localhost:3000/static/js/bundle.js:43:78)

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:20085
update.callback @ react-dom.development.js:20118
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20736
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
render @ react-dom.development.js:26103
./src/index.js @ index.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
index.tsx:24 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (index.tsx:24:1)
    at useHref (index.tsx:358:1)
    at LinkWithRef (index.tsx:263:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at updateForwardRef (react-dom.development.js:17044:1)
    at beginWork (react-dom.development.js:19098:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at beginWork$1 (react-dom.development.js:23964:1)