为什么我会遇到这个路由错误“无效挂钩调用”？

Question

我是 React 的新手，在 React Router dom 中遇到一些问题无法解决问题。谁能帮帮我。

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

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 你可能在同一个应用程序中有多个 React 副本

App.js

import React from "react";
import "./App.css";
import Header from "./Components/Header";
import Home from "./Components/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <div className="app">
        <Routes>
          <Route path="/checkout" element={[<Header />, <h1>I am a checkout page</h1>]}/>
          <Route path="/" element={[<Header />, <Home />]}/>
        </Routes>
      </div>
    </Router>
  );
}
export default App

家庭组件

import React from 'react'
import './Home.css';
import Product from './Product'
function Home() {
    return (
        <div className='home'>
            <div className="home_container">
                <img className='home_img' src="./banner.png" alt="Banner" />
                <div className="home_row">
                    <Product
                    id="12321341" title='The Lean Startup: How Todays Entrepreneurs Use Continuous Innovation to Create Radically Successful Businesses' price={29.99} image={'https://m.media-amazon.com/images/W/IMAGERENDERING_521856-T1/images/I/81-QB7nDh4L.jpg'} rating={4} />

                    <Product title="Kenwood kMix Stand Mixer for Baking, Stylish Kitchen Mixer with K-beater, Dough Hook and Whisk, 5 Litre Glass Bowl"
            price={239.0}
            rating={4}
            image="https://images-na.ssl-images-amazon.com/images/I/81O%2BGNdkzKL._AC_SX450_.jpg" />

                </div>
                <div className="home_row">
                <Product
            id="4903850"
            title="Samsung LC49RG90SSUXEN 49' Curved LED Gaming Monitor"
            price={199.99}
            rating={3}
            image="https://images-na.ssl-images-amazon.com/images/I/71Swqqe7XAL._AC_SX466_.jpg"
          />
          <Product
            id="23445930"
            title="Amazon Echo (3rd generation) | Smart speaker with Alexa, Charcoal Fabric"
            price={98.99}
            rating={5}
            image="https://media.very.co.uk/i/very/P6LTG_SQ1_0000000071_CHARCOAL_SLf?$300x400_retinamobilex2$"
          />
          <Product
            id="3254354345"
            title="New Apple iPad Pro (12.9-inch, Wi-Fi, 128GB) - Silver (4th Generation)"
            price={598.99}
            rating={4}
            image="https://images-na.ssl-images-amazon.com/images/I/816ctt5WV5L._AC_SX385_.jpg"
          />

                </div>
                <div className="home_row">
                <Product
            id="90829332"
            title="Samsung LC49RG90SSUXEN 49' Curved LED Gaming Monitor - Super Ultra Wide Dual WQHD 5120 x 1440"
            price={1094.98}
            rating={4}
            image="https://images-na.ssl-images-amazon.com/images/I/6125mFrzr6L._AC_SX355_.jpg"
          />
                </div>
            </div>
        </div>
    )
}

export default Home

页眉组件

import React from 'react'
import './Header.css'
import SearchIcon from '@mui/icons-material/Search';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
function Header() {
    return (
        <div className='header'>
            {/* Logo */}
            <img className='header_logo' alt='Logo' src='https://easyshop.direct/wp-content/uploads/2023/01/Logo-Easyshop_Bluegreen2240-2-2048x1288.png' />
            {/* Search Bar */}
            {/*  */}

            <div className="header_search">
                <input type="text" className='header_search_input' />
               <SearchIcon className='header_searchIcon'/>
            </div>
            {/* Header Navigation */}
            <div className="header_nav">
                <div className="header_option">
                    <span className='header_optionLineOne'>Hello Guest</span>
                    <span className='header_optionLineTwo'>Sign In</span>

                </div>

                <div className="header_option">
                    <span className='header_optionLineOne'>Returns</span>
                    <span className='header_optionLineTwo'>& Orders</span>

                </div>
                <div className="header_option">
                <span className='header_optionLineOne'>Your</span>
                    <span className='header_optionLineTwo'>Shop</span>
                </div>
                <div className="header_optionBasket">
                    <ShoppingBasketIcon />
                    <span className='header_optionLineTwo header_optionBasketCount'>0</span>
                </div>
            </div>

        </div>

    )
}

export default Header