如何从同一选项卡中的 App.js 文件导航到我的 html 文件？

Question

我正在做 React 项目。我想从 App.js 导航到我的 HTML 文件而不打开新的 tab.ie 它应该在浏览器的同一个选项卡上打开

我的 HTML 文件 (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;

现在我在 App.js

中通过这样做来导航

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

我想在不打开新选项卡的情况下导航到我的 HTML 页面，并且还想知道如何在不单击浏览器的后退按钮的情况下导航回上一页。

Answer 1

您需要从 <a> 元素中删除 target="_blank" 属性。

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;

Answer 2

如果您尝试路由到 map.html onclick 那你做错了你可以使用 react-router-dom

而不是创建 map.html 你应该在 src 文件夹中创建 map.js 并将其导入 App.js

对于 React 中的路由，推荐的方式是 React 路由

map.js（而不是 map.html）

import React from "react";

const Map = () =>{
 return <p>You came here</p>
}

export default Map;

你不必到处写头标签和其他

现在 App.js

import React from "react";
import Map from "./map"; //this is map.js

const App = () =>{
 return <Map/>
}

export default App;

这是没有路由... 现在有了路由在 App.js

import React from "react";
import Map from "./map"; //this is map.js
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Link
} from "react-router-dom";

const App = () =>{
 return(
<>
<Link to="/map">Map</Link>

<Router>
<Switch>
<Route path="/map" component={<Map>}/>
</Switch>
</Router>
</>
    )
}

export default App;

当您单击地图时，我们会在同一选项卡中显示 map.js 页面的内容

注意：react-router-dom这里使用的是5版本最新是6版本，阅读reactjs官方文档

如何从同一选项卡中的 App.js 文件导航到我的 html 文件？

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

html

javascript

navigation

reactjs