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 undefined

SubPortfolio.directToGithub

C:/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&nbsp;href="https://www.github.com"><button&nbsp;id="github"&nbsp;type="button">github</button></a>如果您尝试使用<Link>来定向到内部链接，它看起来更像这样<Link&nbsp;to="/github"><button&nbsp;id="github"&nbsp;type="button">github</button></Link>然后必须使用路由器在 app.js 中设置链接，然后将其定向到命名组件

Answer 2

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