CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Gabrielle Ndoro
Gabrielle Ndoro

Reputation: 11

Link not working properly in React (React-Router v6)

So I have developed an application in React with TypeScript, and I have also created my own instance of a small Redux store. In my application, I am fetching data from an API for a tv series and would like users to be able to select their favorite episode. I would also like users to be able to view their favorite episodes on a separate page, but each time I create the navigation between the home page & favorites using {Link}, all my data stops displaying and nothing is rendered on the page. The errors displayed in the console are as follows:

Uncaught Error: useHref() may be used only in the context of a <Router> component.
at invariant (index.tsx:19:1)
at useHref (index.tsx:353:1)
at LinkWithRef (index.tsx:256: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)

Home.tsx:26 Objectepisodes: []favorites: [][[Prototype]]: Object
react-dom.development.js:20085 The above error occurred in the <Link> component:

at LinkWithRef (http://localhost:3000/static/js/bundle.js:35378:5)
at a
at div
at header
at div
at App (http://localhost:3000/static/js/bundle.js:42:42)
at StoreProvider (http://localhost:3000/static/js/bundle.js:639:5)

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
bootstrap:27 Uncaught Error: useHref() may be used only in the context of a <Router> 
component.
at invariant (index.tsx:19:1)
at useHref (index.tsx:353:1)
at LinkWithRef (index.tsx:256: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)

Kindly assist

Upvotes: 1

Views: 2947

Answers (1)

Wraithy
Wraithy

Reputation: 2056

Please next time add some code from your application. But i suppose that you have your Link somewhere outside the <Router> component... this must be used in children of <Router>


<Router>
 <Header>
  <Link to='something'>
 </Header>
 <Route />
 <Route />
</Router>

Upvotes: 1

Related Questions