Errors when removing react-router-dom v6 from index.js

Question

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)

Answer 1

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.