反应路由器：无效的钩子调用。 钩子只能在 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();