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

Question

我正在研究反应项目。 我想在不打开新选项卡的情况下从 App.js 导航到我的 HTML 文件。即它应该在浏览器的同一选项卡上打开

我的 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>

应用程序.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

对于反应路由推荐的方式是反应路由

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 时，我们会在同一选项卡中显示 map.js 页面的内容

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

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2022-04-16 09:12:54

解决方案2
1 2022-04-16 10:06:18

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2022-04-16 09:12:54

解决方案2 1 2022-04-16 10:06:18

解决方案1
1 已采纳 2022-04-16 09:12:54

解决方案2
1 2022-04-16 10:06:18