React Router：在index.tsx中使用useState而不是App.js时，Hook调用无效

Question

我正在尝试按照下面的视频学习 React Router，但问题是在我的 stackblitz 中没有 App.js。 所以我已将所有内容包含在index.tsx 中。但现在我需要使用这一行 ----> const [user, setUser] = useState(null); .

如果我使用这条线，我会收到错误，你能让我知道如何修复它吗？

错误： 下面提供我的代码片段、沙箱和 YouTube 教程。

无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一：

https://stackblitz.com/edit/react-9czykt?file=index.tsx,pages%2FProducts.tsx,pages%2FSingleProduct.tsx,pages%2FLogin.tsx,pages%2FDashboard.tsx,App.tsx

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>
);

Answer 1

该代码违反了 Hooks 规则。

创建一个根级 React 组件，可以调用

useState

钩子并渲染路由器和路由。

示例：

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 App = () => {
  const [user, setUser] = useState(null);

  return (
    <BrowserRouter>
      <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>
      </Routes>
      <StyledEngineProvider injectFirst>
        <Demo />
      </StyledEngineProvider>
    </BrowserRouter>
  );
};

ReactDOM.createRoot(document.querySelector('#root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);