反應路由器：無效的鈎子調用。 鈎子只能在 function 組件的主體內部調用

Question

我有一個普通的反應應用程序，使用反應路由器。 嘗試在 Box.js 中獲取 url 參數時，我收到此錯誤：無效的掛鈎調用。 鈎子只能在 function 組件的主體內部調用。 這是代碼：

Box.js

import React from 'react'
import { useParams } from "react-router-dom";

function Box()
{
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box();

應用程序.js

import
{
  Routes,
  Route
} from "react-router-dom";
import Box from './Box';
function App()
{
  return (
    <div className="App">
      <Routes>
        <Route exact path="/palette/:id/:color" element={<Box />} />
      </Routes>
    </div>
  );
}

export default App;

Answer 1

導出時不應調用 function。

import React from 'react'
import { useParams } from "react-router-dom";

function Box()
{
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box;

Answer 2

從導出部分中刪除()

import React from 'react'
import { useParams } from "react-router-dom";

function Box(){
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box;

Answer 3

如果您使用 npm 鏈接或任何其他庫，您的捆綁器可能會看到兩種不同的反應並顯示該錯誤， 請參見此處

或者您可以刪除 ()

import React from 'react'
import { useParams } from "react-router-dom";

function Box()
{
    let params = useParams();
    return (
        <div>
            <h1>{params}</h1>
        </div>
    )
}
export default Box();