couldn't access history of react router

The App component needs to be either rendered by a Route component so it can be passed route props so there's a defined history prop, or decorate and export App with the withRouter Higher Order Component.

App

import React from "react";
import "./styles.css";
import { withRouter } from "react-router-dom";

class App extends React.Component {
  handleClick = () => {
    this.props.history.push("/home");
  };
  render() {
    return (
      <div className="App">
        <button onClick={() => this.handleClick()}>Click to Nav</button>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

export default withRouter(App);

Alternatively you could convert App to a React function component and import and use the useHistory hook instead.

import React from "react";
import "./styles.css";
import { useHistory } from "react-router-dom";

const App = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/home");
  };

    return (
      <div className="App">
        <button onClick={handleClick}>Click to Nav</button>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
}

export default App;

I see also that you are using react@18 and react-router-dom@5.2.0 and had removed the React.StrictMode component in your index.js file. There was an issue introduced by react@18 that broke RRDv5 routing (described here) that was resolved in react-router-dom@5.3.3 so I suggest you upgrade to the latest v5 version.

npm i -s react-router-dom @5

index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HashRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </StrictMode>
);