BrowserRouter causes Invalid hook call (react.develeopment.js 209) in React and React.Dom 18.2.0-CodePudding

I have tried to add a BrowserRouter in simple index.js file , it compiles successfully but in the browser I get the following error: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component

to note , when I remove the borwserRoter from the code , the codes works fine

could you please tell me what is the cause of this issue?




import './App.css';

export default function App() {
  return (
    <div>
      <h1>Hello world</h1>
    </div>
  );
}

import * as React from "react";
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
//import * as serviceWorker from "./serviceWorker";



const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <BrowserRouter>
   < App/>
  </BrowserRouter>,
);

I checked the versions which are same , I reinstall npm , I also checked no invalid hooks in the code

CodePudding user response：

Question resolved successfully.

No more views required here. You have not installed react-router-dom.