Javascript React路由器导致无效的钩子调用

我有一个React应用程序，它使用

React路由器

。我的路线的简约版本如下：

<Router>
   <div className="App">
      <Sidebar />
      <div className="app-container">
        <Switch>
          <Route path="/" exact render={Home} />
          <Route path="/logs" exact render={Logs} />
          <Route path="/log/:logID" exact render={Log} />
        </Switch>
      </div>
   </div>
</Router>

我可以通过在

Route

组件中输入类似于

render={（）=>}

的函数来绕过此问题，但这样做会使我无法访问组件中的

match.params

。是否有修复程序允许我使用

render={Log}

而不引发错误

编辑：

下面是一个会使应用程序崩溃的

Home

组件的示例：

import React, { useState } from 'react'

export default function Home() {

    const [foo, setFoo] = useState('bar');

    return (
        <div>
            Home
        </div>
    )
}

import React，{useState}来自“React”
导出默认函数Home（）{
const[foo，setFoo]=useState（'bar'）；
返回(
家
)
}

---

调用

useState

时抛出错误。对于任何其他react挂钩，都会观察到相同的行为。

来自react路由器文档：

使用组件（而不是下面的渲染或子级）时 路由器使用React.createElement从 给定组件。这意味着如果您向 组件道具，您将在每次渲染时创建一个新组件。这 导致现有组件卸载和新组件 安装，而不仅仅是更新现有组件。使用时 对于内联渲染的内联函数，请使用渲染或 儿童道具（下图）

---

您确实不希望每次重新呈现父级时都装载路由组件。我建议将组件作为一个孩子传递-

你能包含

主页

组件吗？@TasosBu编辑了我的帖子，添加了一个示例是的，这就是我不愿意使用函数的原因。我现在将组件作为子组件传递进来，并调用

useParams

-但是知道为什么

render={component}

语法会使应用程序崩溃吗？根据路由代码（）我的最佳猜测是react没有将您传递进来的组件作为实际组件，而是一个生成一些标记代码的函数。因此，获取所得到的错误是有意义的，因为钩子不会在组件内部调用，但在路由组件中，这就是为什么不会在每次渲染时调用钩子的原因。

import React, { useState } from 'react'

export default function Home() {

    const [foo, setFoo] = useState('bar');

    return (
        <div>
            Home
        </div>
    )
}