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

Question

我想制作一个按钮来链接到带有反应库的不同应用程序。我的代码看起来像这样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 undefinedSubPortfolio.directToGithubC:/Users/Ermais Kidane/Documents/REACT/portfolio/src/components/subportfolio/subportfolio.js:30我尝试使用 Link React-router-dom 并添加到以前的 url，如（http://localhost:3000/https://github.com），并且没有在任何地方使用 make 。我怎样才能使链接到另一个网站？谢谢你的帮助。

Answer 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 中设置链接，然后将其定向到命名组件

Answer 2

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