0
299
ViewsReact router dom throws invalid hook call, cannot read properties of null, etc
import './interface/App.css';
import { Home } from './interface/home';
import { Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<div>
<Router>
<div>
<Route exact path='/' component={Home}></Route>
</div>
</Router>
</div>
);
this throws
I have no idea why, I was following some tutorials and failed. I have tried using <Home/> instead of Home, I updated all my packages including react, react-dom, react-router-dom.
Any ideas why this is happening?
1 answers
Answer question0
Issue
You are using react-router-dom@6 and using the low-level Router when you should import and use one of the high-level routers (BrowserRouter, MemoryRouter, etc) and you are using the RRDv5 Route component APIs. The Router component has a couple required props to make it work.
declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial<Location> | string; navigationType?: NavigationType; navigator: Navigator; static?: boolean; }
Missing from your code are the required navigator and location props which feed into an internal location context the low-level router holds.
Solution
Import a high-level router, wrap the Route components in the Routes component, and render the routed content on the element prop as a ReactNode, a.k.a. JSX. component (and render and children function props`) are v5 and don't exist in v6.
The high-level routers maintain their own history/location contexts internally.
Example:
import './interface/App.css';
import { Home } from './interface/home';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return (
<div>
<Router>
<div>
<Routes>
<Route path='/' element={<Home />} />
</Routes>
</div>
</Router>
</div>
);
}