Why do routes stop working when wrapping a component in the connect function?

Question

React

Good afternoon! There is an App component that contains routes. When wrapping this component in react-redux's connect function, routes stop working. More precisely, they work, but the rendering of the component occurs only after the page is reloaded. How can this problem be solved?

import React, { Component } from 'react'
import './App.css'
import { Route, Switch } from 'react-router-dom'
import Scripts from '../Scripts/Scripts'
import Layout from '../../hoc/Layout/Layout'
import ViewScript from '../ViewScript/ViewScript'
import Admin from '../Admin/Admin'
import AddNewScript from '../AddNewScript/AddNewScript'
import Page404 from '../../components/Page404/Page404'
import {connect} from 'react-redux'

class App extends Component {
  render() {
    return (
      <Layout>
        <Switch>
          <Route exact path="/" component={Scripts} />
          <Route path="/viewscript/:id" component={ViewScript} />
          <Route path="/admin" exact component={Admin} />
          <Route path="/admin/addnewscript" component={AddNewScript} />
          <Route path="*" component={Page404}/>
        </Switch>
      </Layout>
    )
  }
}

export default connect()(App)

Here is the App component itself

Answer 1

import { withRouter } from 'react-router-dom'
...
export default withRouter(connect()(App))