Expected behavior

Open page currectly.

Actual behavior

Error: You should not use or withRouter() outside a . What wrong?

Resources (screenshots, code snippets etc.)

package.json

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.3.2",
    "history": "^4.9.0",
    "jquery": "^3.3.1",
    "mdbreact": "4.12.0",
    "popper.js": "^1.14.7",
    "prop-types": "^15.7.2",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-particles-js": "^2.5.1",
    "react-redux": "^6.0.1",
    "react-router": "5.0.0",
    "react-router-dom": "5.0.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "2.1.8",
    "react-toastify": "^4.5.2",
    "react-toastify-redux": "^1.0.0-rc.2",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  }

Code:

const composeEnhancers = composeWithDevTools({
    name: "REACT"
});

const history = createHashHistory();

const store = createStore(reducersConfig(history), composeEnhancers(applyMiddleware(routerMiddleware(history), thunk, logger)));

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App/>
        </ConnectedRouter>
        <ToastContainer position={toast.POSITION.BOTTOM_RIGHT}/>
    </Provider>,
    document.getElementById('root'));

App:

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      collapse: false
    };

    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({
      collapse: !this.state.collapse,
    });
  }

  render() {
    return (

        <Route path={"/"} render={()=>{
          return (
              <React.Fragment>

                <MDBNavbar color="default-color" expand="md" fixed="top" scrolling dark >
                  <MDBNavbarBrand href="/">
                    <strong>Java Question</strong>
                  </MDBNavbarBrand>
                  <MDBNavbarToggler onClick={ this.onClick } />
                  <MDBCollapse isOpen = { this.state.collapse} navbar>
                    <MDBNavbarNav left>
                      <MDBNavItem active>
                        <MDBNavLink to="#">Home</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#">Features</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#">Pricing</MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#">Options</MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                    <MDBNavbarNav right>
                      <MDBNavItem>
                        <MDBNavLink to="#"><MDBIcon fab icon="facebook-f" /></MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#"><MDBIcon fab icon="twitter" /></MDBNavLink>
                      </MDBNavItem>
                      <MDBNavItem>
                        <MDBNavLink to="#"><MDBIcon fab icon="instagram" /></MDBNavLink>
                      </MDBNavItem>
                    </MDBNavbarNav>
                  </MDBCollapse>
                </MDBNavbar>
                <MDBContainer className="text-center" style={{height: "100vh", paddingTop: "64px"}} fluid>
                  <MDBRow className="align-content-center justify-content-center h-100">
                    <MDBCol xl={"12"}>
                      <h2>This Navbar is fixed</h2>
                      <h5>It will always stay visible on the top, even when you scroll down</h5>
                      <br/>
                      <p>Full page intro with background image will be always displayed in full screen mode, regardless of device</p>
                    </MDBCol>
                  </MDBRow>
                </MDBContainer>

              </React.Fragment>
          );
        }}/>

    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {

  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {

  }
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));