react - Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function-CodePudding

when running the below code,the webpage is not loading and console shows the error Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.Any help is much appreciated.

App.js

import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
import About from './container/About';

function App() {

 return (
 <>
 <Router>
  <Link to='/about' >About Page</Link>
  <Link to='/profile'>Profile Page</Link>
  <Route component={About} path='/about'/>
  <Route render={()=><h1>Hello</h1>} path='/profile'/>
</Router>
    </>
  );
}

export default App;

CodePudding user response：

This problem had been raised here as well. You can check it out for the answer. Hopefully, it can help you out.

https://stackoverflow.com/a/70474994

According to the answer, I can see the problem is from your react-router-dom package. You can upgrade it, or check where you place its dependency and you can update it accordingly.