React js - 将按钮链接到不同的应用程序答案

【问题标题】：React js - make button link to a different appReact js - 将按钮链接到不同的应用程序
【发布时间】：2020-03-28 16:10:14
【问题描述】：

我想制作一个按钮来链接到带有反应库的不同应用程序。我的代码是这样的

import React, { Component } from "react";
import { Link, NavLink, Redirect } from "react-router-dom";
import "./subportfolio.scss";

import Coffee1 from "../../assets/coffee-1.jpg";
import Coffee2 from "../../assets/coffee-2.jpg";
import Coffee3 from "../../assets/coffee-3.jpg";
import Coffee4 from "../../assets/coffee-4.jpg";
import CoffeeShop from "../../assets/coffee-shop-1.jpg";
import Tea1 from "../../assets/tea-1.jpg";
import Tea2 from "../../assets/tea-2.jpg";
import Tea3 from "../../assets/tea-3.jpg";

class SubPortfolio extends Component {
  state = {
    projectImg: {
      project1: Coffee1,
      project2: Coffee2,
      project3: Coffee3,
      project4: Coffee4,
      project5: CoffeeShop,
      project6: Tea1,
      project7: Tea2,
      project8: Tea3
    },
    direct: ""
  };

  directToGithub = () => {
    this.props.history.go("https://github.com");
  };
  render() {

    console.log(this.state.direct);
    return (
      <div className="subPortfolio">
        <div className="subPortfolio__content">

          <div className="subPortfolio__content--detail">
            <h2>Image Format</h2>
            <div className="subPortfolio__content--refer">

              <div className="subPortfolio__content--button">
                <button
                  id="github"
                  type="button"
                  onClick={this.directToGithub}
                >
                  github
                </button>

              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default SubPortfolio;

我尝试了所有历史属性，但都抛出错误

TypeError: Cannot read property 'go' of undefined
SubPortfolio.directToGithub
C:/Users/Ermais Kidane/Documents/REACT/portfolio/src/components/subportfolio/subportfolio.js:30
  27 |  };
  28 | 
  29 |  directToGithub = () => {
> 30 |    this.props.history.go("https://github.com");
     | ^  31 |  };
  32 |  render() {
  33 |    // const projectsImage = Object.keys(this.state.projectImg).map(proImg => {

我尝试使用 Link React-router-dom 并添加到以前的 url，如 (http://localhost:3000/https://github.com)，并且没有在任何地方使用 make。

我怎样才能链接到另一个网站？感谢您的帮助。

【问题讨论】：

你使用<BrowserRouter>吗？你能告诉App.js你是如何设置路由器部分的吗？谢谢！
您只是真正使用来在您的应用程序内部进行定向，您是要链接到外部站点还是内部组件？
为什么不使用旧的<a> 标签？
当我在 react 应用程序中使用 a 标签时会引发警告？

标签： javascript reactjs react-router-dom

【解决方案1】：

如果您想被定向到外部网站，只需使用标准的<a></a> 标签

<a href="https://www.github.com"><button id="github" type="button">github</button></a>

如果您尝试使用 <Link> 指向内部链接，它看起来更像这样

<Link to="/github"><button id="github" type="button">github</button></Link>

然后必须使用路由器在 app.js 中设置链接，然后将其定向到命名组件

【讨论】：

【解决方案2】：

如果您想以编程方式定向到外部网站，您还可以使用window.location = "https://github.com"，或者，假设是全局window 对象，location = "https://github.com"。

【讨论】：