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

Question

I have a React application that uses react-router . A minimalistic version of my routing is as follows:

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

However, whenever I access a route that contains a React hook, my application crashes with the following error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://.../react-invalid-hook-call for tips about how to debug and fix this problem.

I am able to bypass this by entering a function like render={() => <Log />} into the Route component, but doing so makes me unable to access match.params in the component. Is there a fix that would allow me to use render={Log} without the error being thrown?

Edit:

Below is an example of a Home component that would crash the app:

import React, { useState } from 'react'

export default function Home() {

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

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

The error gets thrown when useState is called. The same behaviour would be observed for any other react hooks.

Answer 1

From react-router docs:

When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).

You really don't want to mount your routed component every time your parent is re-rendered. I'd suggest passing the component as a child - https://reactrouter.com/web/api/Route