I am trying to learn react router by following the below video but the problem is in my stackblitz there is no App.js.
So I have included everything inside index.tsx. but now I need to use this line —-> const [user, setUser] = useState(null);
.
If I use this line I am getting the error, can you let me know how to fix it.
Error:
Providing my code snippet, sandbox and youtube tutorial below.
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:
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import Error from './pages/Error';
import SharedLayout from './pages/SharedLayout';
import SingleProduct from './pages/SingleProduct';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';
const [user, setUser] = useState(null);
ReactDOM.createRoot(document.querySelector('#root')!).render(
<React.StrictMode>
<BrowserRouter>
{/* <nav>our nav bar</nav> */}
<Routes>
<Route path="/" element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
<Route path="products/:productId" element={<SingleProduct />} />
<Route path="login" element={<Login setUser={setUser} />} />
<Route path="login" element={<Login setUser={setUser} />} />
<Route path="*" element={<Error />} />
</Route>
{/* <Route path="dashboard" element={<div> dashboard</div>}>
<Route path="stats" element={<div> stats</div>} />
</Route> */}
</Routes>
<StyledEngineProvider injectFirst>
<Demo />
</StyledEngineProvider>
{/* <footer>our footer</footer> */}
</BrowserRouter>
</React.StrictMode>
);
2
Answers
The code is breaking the Rules of Hooks.
Create a root-level React component that can call the
useState
hook and render the router and routes.Example:
The Problem is with this part of the code
const [user, setUser] = useState(null);
. React hooks (such asuseState
) can only be used inside the body of a functional component.Try moving the following part of your code to a separate component and also move
useState
to that component.