1

For context: I'm still very new to programming and I've been fiddling with implementing a user system with a project I'm working, at first I tried to split the project user react-router-dom to create a login page. After accepting that I was a little out of my depth, I looked into other solutions, and from what I've read it seems that auth0 might solve all my problems in a lot more streamlined fashion. Now however, when trying to remove the React.Router.Dom directs in my index.js file I get a bunch of errors.

Additionally, I haven't been able to find an example of who the auth0 code would interact with react-router-dom in the index file. I haven't begun to apply any code from auth0 yet. I was going to remove everything that was related to react-router first and get the application back to its previous state.

So, to my question and the specifics - when trying to restructure my index.js file from this (note: application runs totally fine with this code):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Login from './Login';
import 'bootstrap/dist/css/bootstrap.css'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/Login" element={<Login />} />
    </Routes>  
  </BrowserRouter>,
  document.getElementById('root')
);

to the reduced:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import 'bootstrap/dist/css/bootstrap.css'

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

I anticpated the program to just render the component without issue, but maybe I've deleted too much from the ReactDOM.render() ?

I believe this is the only relevant code, as I don't have routes implemented anywhere else in the project.

The errors are here: #1

Uncaught Error: useHref() may be used only in the context of a <Router> component.
at invariant (router.ts:5:1)
at useHref (hooks.tsx:32:1)
at LinkWithRef (index.tsx:267: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)

#2

The above error occurred in the <Link> component:

    at LinkWithRef (http://localhost:3000/static/js/bundle.js:36339:5)
    at div
    at div
    at div
    at Header
    at div
    at App (http://localhost:3000/static/js/bundle.js:62:84)

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.

#3

router.ts:5 Uncaught Error: useHref() may be used only in the context of a <Router> component.
    at invariant (router.ts:5:1)
    at useHref (hooks.tsx:32:1)
    at LinkWithRef (index.tsx:267: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)
dconnenc
  • 31
  • 6
  • The `App` component is rendering `react-router-dom` `Link` components somewhere. If you are really trying to gut RRD from the app then you'll need to go through each file and remove all remnants of RRD components. It sounds like all the routing code is working though so it's unclear why you would *want* to remove it when really it seems like you are just wanting to implement route protection. Is this the real case you are trying to resolve? If so, does this [answer](/a/66289280/8690857) about creating protected routes help? You'd replace the "auth context" with your auth0 logic. – Drew Reese Jul 01 '22 at 17:38
  • Hey Drew thanks so much for an answer, maybe my instinct isn't correct. I've been unable to find the correct way to implement both on top of each other, but I may just need to keep digging. I'll take a look at the article you linked here, because maybe that will be easier than unrooting all the RRD stuff. – dconnenc Jul 01 '22 at 17:44
  • Yeah, RRD marries very cleanly with authentication schemes generally. – Drew Reese Jul 01 '22 at 17:47

1 Answers1

0

I can't know without seeing your other files, but it looks like you are still using the <Link /> component. Link requires data provided by <BrowserRouter />, so you'll want to change the Link components to <a /> tags if you aren't using a router anymore.