Router between page

I want to have a router in my chat application. So I tried to switch my path from one page to another but it failed, in my opinion, I had followed the good steps but unlucky I got an error I don’t have any idea where I have a fault exactly so here’s the error that appears in the console:

react.development.js:207 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:207
error @ react.development.js:181
resolveDispatcher @ react.development.js:1590
useRef @ react.development.js:1627
BrowserRouter @ index.tsx:151
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
beginWork$1 @ react-dom.development.js:27381
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
recoverFromConcurrentError @ react-dom.development.js:25806
performConcurrentWorkOnRoot @ react-dom.development.js:25706
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:207 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:207
error @ react.development.js:181
resolveDispatcher @ react.development.js:1590
useRef @ react.development.js:1627
BrowserRouter @ index.tsx:151
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
beginWork$1 @ react-dom.development.js:27405
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
recoverFromConcurrentError @ react-dom.development.js:25806
performConcurrentWorkOnRoot @ react-dom.development.js:25706
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react.development.js:1628 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at useRef (react.development.js:1628:1)
    at BrowserRouter (index.tsx:151:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
useRef @ react.development.js:1628
BrowserRouter @ index.tsx:151
renderWithHooks @ react-dom.development.js:16175
mountIndeterminateComponent @ react-dom.development.js:20913
beginWork @ react-dom.development.js:22416
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
beginWork$1 @ react-dom.development.js:27405
performUnitOfWork @ react-dom.development.js:26513
workLoopSync @ react-dom.development.js:26422
renderRootSync @ react-dom.development.js:26390
recoverFromConcurrentError @ react-dom.development.js:25806
performConcurrentWorkOnRoot @ react-dom.development.js:25706
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18572 The above error occurred in the <BrowserRouter> component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:1547:5)
    at div
    at App
so here's my code :

import {BrowserRouter as Router,  Routes, Route, Link} from "react-router-dom";
import HomePage from "./components/HomePage";
import RegisterPage from "./components/RegisterPage";

const App =() => {
 return (
   <div>
     <Router>
        <Routes>
          <Route exact path="/" element={<HomePage />} ></Route>
          <Route path="/register" element={<RegisterPage /> } ></Route>
        </Routes>
     </Router>
   </div>
 )     
} 

export default App;

//the HomePage:
import {Link} from "react-router-dom";
const HomePage = () => {
return (  
      <div className="mainDiv" >
         <div className="text" >
            <h1>Private</h1>
         </div> 

      <form > 
        <div className="container">
          <label for="username"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="uname" required />
          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" required />   
          <button type="submit">Login</button>
          <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember me
          </label>
      </div>
    
      <div className="container" style={{"backgroundColor":"#f1f1f1"}}>
       
       {/* <a href="" >Forgot password?</a>*/}
        <div className="btn" >
          
        <button ><Link to="/register" >Create New Account </Link></button>
       
        </div>
      </div>
    </form>
    </div>   
  )
};
export default HomePage;

//the RegisterPage:
import React from "react";

const RegisterPage = () => {
return (
 <div>
  <form className="form" >
  <div>
    <h1>Register</h1>
  </div>
  <div>
    <label htmlFor="name" >
      Enter your name
    </label>
    <input type="text" id="name" placeholder="Enter your name" />
  </div>
  <div>
    <label htmlFor="familyName" >
      Enter your family name
    </label>
    <input type="text" id="familyName" placeholder="Enter your family name" />

  </div>
  <div>
    <label htmlFor="email" >
      Enter your email
    </label>
    <input type="text" id="email" placeholder="Enter your password" />
  </div>
  <div>
    <label htmlFor="password" >
      Enter your password
    </label>
    <input type="text" id="password" placeholder="Enter your password" />

  </div>
  <div>
    <label htmlFor="confirmPassword" >
      Confirm your password
    </label>
    <input type="text" id="confirmPassword" placeholder="Confirm your password" />

  </div>
  <label />
  <button className="primary" type="submit" > Register</button>
 </form>
</div>
)
};
export default RegisterPage;

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.