Problem in Link and to in react and react router-CodePudding

I am new to React.js My problem is whenever I use <Link to="/"> instead of <a href="/"> my page goes blank and I still couldn't figure out what is going on and why I can't use <Link> if I use <a href="/"> then the page is showing up

import { BrowserRouter as Router, Link, Routes, Route } from "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 " 
}

in app.js I have

    <>
      <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)

CodePudding user response：

Move NavBar into the Router so it has a valid routing context for the links.

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