当我使用react-router访问一个功能组件时，它会呈现两次。然而，当我刷新该组件的页面时，它只会呈现一次。
对于测试，创建了如下的空功能组件：

import React from 'react'

const TestFunctional: React.FC<any> = () => {
  console.log('Test===>>>') // console log twice when navigate to this component
  return <></>
}

export default TestFunctional

字符串
这是App.tsx中的路由器

import React from 'react'
import { Route, Switch, useLocation, withRouter } from 'react-router-dom'
import TestFunctional from 'views/Test'

const AnimatedSwitch = withRouter(({ location }) => (    
  <Switch>
     <Route exact path="/" component={StartPage} />
     <Route exact path="/test" component={TestFunctional} />
  </Switch>
))

const App = () => {
  return (
    <div className="app">
      <Web3ReactManager>
        <AnimatedSwitch />
      </Web3ReactManager>
    </div>
  )
}

export default App

型
我没有在index.tsx中使用React.StrictMode。

ReactDOM.render(
  <ApolloProvider client={client}>
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Web3ReactProvider getLibrary={getLibrary}>
          <Web3ProviderNetwork getLibrary={getLibrary}>
            <App />
          </Web3ProviderNetwork>
        </Web3ReactProvider>
      </ConnectedRouter>
    </Provider>
  </ApolloProvider>,
  document.getElementById('root')
)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers
serviceWorker.unregister()

型
所以这是一些奇怪的。当我刷新这个页面，console.log('Test===>>>')只显示一次。什么是错误和如何修复双重渲染问题？