How can I navigate to my html file from App.js file in same tab?

I am working on react project. I want to navigate to my HTML file from App.js without opening a new tab.ie it should open on same tab of browser

My HTML file (map.html)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Opens New tab</title>
    </head>
    <body>
        <p>You came here</p>
    </body>
</html>

App.js

import logo from "./logo.svg";
import "./App.css";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <a target="_blank" href={process.env.PUBLIC_URL + "map.html"}>
                    {" "}
                    Map
                </a>
            </header>
        </div>
    );
}
export default App;

Now I am navigating by doing this in App.js

<a target="_blank" href={process.env.PUBLIC_URL + "map.html"} > Map</a>

I want to navigate to my HTML page without opening the new tab and also would like a way to know how can I navigate back to previous page without clicking back button of browser.

Solution

You need to remove target="_blank" attribute from the <a> element.

import logo from "./logo.svg";
import "./App.css";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <a href={process.env.PUBLIC_URL + "map.html"}>
                    {" "}
                    Map
                </a>
            </header>
        </div>
    );
}
export default App;