Search
Search

Problem in Link and to in react and react router

Awais Zahid Published at Dev
13
Awais Zahid

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

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

About the react router link problem state field name problem

React Router or Link Not Rendered

React router anchor link

React Router Link ForceUpdate

Testing React Router with Link

Style a React Router Link

Router Link on Bootsrap React

React Router <Link />

How to use <Link> react router?

React router Link absolute path

Navigation using Link with react router

Active link with React-Router?

React-Router External link

Using Link in React Router 4

React router Link; activeClassName not working

React router dom LINK concatunates

React router, pass props with Link

React router Link wrong url

Using router link on a div in react

Disable react-router Link in react

React Router link to non React page in application

Link not working with react router in React.js

Problem with React Router NavLink and activeClassName

Problem with React Router and nested routes

I have a problem with two .js files in a react app! I am using the react-router-dom. My problem is with the Link tag

Link in Material UI and React Router Dom

How to control a Link on react-router

React Router: Active Link not matching the URL

React-router link doesn't work

TOP Ranking

  1. 1

    pump.io port in URL

  2. 2

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  3. 3

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  4. 4

    Inner Loop design for webscrapping

  5. 5

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  6. 6

    mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

  7. 7

    Removed zsh, but forgot to change shell back to bash, and now Ubuntu crashes (wsl)

  8. 8

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

  9. 9

    How to run blender on webserver?

  10. 10

    Resetting Value of <input type="time"> in Firefox

  11. 11

    Converting a class method to a property with a backing field

  12. 12

    Ambiguous use of 'init' with CFStringTransform and Swift 3

  13. 13

    Execute ./script.sh with a crontab

  14. 14

    How to set tab order for array of cluster,where cluster elements have different data types in LabVIEW?

  15. 15

    How to pass data to the ng2-bs3-modal?

  16. 16

    Retrieve Element Tag Value XML Using Bash

  17. 17

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  18. 18

    SQL Server : need add a dot before two last character

  19. 19

    Making Array From Page Elements in jQuery

  20. 20

    Laravel's ORM sync with timestamps doesn't update timestamps

  21. 21

    Do animations stop css changes after animation completion?

HotTag

Archive