Whole Page isnt showing up while using react router dom-CodePudding

Hi quick question im using react router dom and i am following a tutorial pretty strictly the code down below shows my first tries with react router dom

https://www.youtube.com/watch?v=Ul3y1LXxzdU 3:19

The whole page is just blank without any content that i saw in the tutorial. I've read multiple questions with this problem but none of them answers my problem

The code compiles without any errors

By copying this files the problem should be reproduceable

I will show the files down below:

App.js

import { Home } from "./Components/Home"

function App() {
  return ( 
  <Routes>
  <Route path="/" element={<Home />} />
  </Routes>
  )
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);


reportWebVitals();

Home.js

export function Home(){

    return <h1>Home</h1>
    
    }

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>test</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

So after further inspection it has shown that the code works in codesandbox absolutely fine without problems.

Code Sandbox link to prove that everything works normally codewise: https://codesandbox.io/s/blazing-cdn-pm1rqt?file=/src/index.js

I also checked the terminal inside of the web page. In there i found about 8 errors: Maybe someone had similar issues when opening the website and can explain what those really mean

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:248:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
2react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:248:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
react-dom.development.js:18687 The above error occurred in the <BrowserRouter> component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:42679: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:18687
react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1630:1)
    at BrowserRouter (index.tsx:248:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
    at recoverFromConcurrentError (react-dom.development.js:25850:1)

CodePudding user response：

No need to user Router, since you have kept you inside the BrowserRouter on index.js , so need to add Router in App.js

    import { Home } from "./Home";
import { About } from "./About";
import { Route, Router, Routes } from "react-router-dom";
function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </div>
  );
}

export default App;

https://codesandbox.io/s/compassionate-microservice-gthc3p?file=/src/App.js:0-276

CodePudding user response：

First of all you should need to check weather the "react-router-dom" dependency is installed in your project or not To install it run the command below in terminal:

npm i react-router-dom

Then after that you need to add the following import line in App.js file

import { Route, Routes } from 'react-router-dom';

And last but not the least your App function code should be this;

import { Home } from "./Components/Home"

function App() {
  return <Routes>
  <Route path="/" element={<Home />} />
  </Routes>
}

export default App;

Router is use in the react-router-dom older version now you don't need to use it