javascript - React js - 将按钮链接到不同的应用程序
问题描述
我想制作一个按钮来链接到带有反应库的不同应用程序。我的代码看起来像这样
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 。
我怎样才能使链接到另一个网站?谢谢你的帮助。
解决方案
如果您试图定向到外部网站,只需使用标准<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 中设置链接,然后将其定向到命名组件
推荐阅读
- android - Flutter、local_auth:Face ID 认证不起作用(即使可用)
- python - Jupyter Lab 远程控制问题 & 如何与 Jupyter cell 交互?
- python - 从列表/数组中排除元素
- c# - 如何根据当前日期在 C# 中获取最近两年的财政年度
- assembly - arm 装配循环数据集
- mysql - Mysql GROUP BY中CASE的SUM值
- wordpress - 如何在 newtwork wordpress(子目录形式)上安装脚本?
- octopus-deploy - Octopus Deploy:无法为部署创建发布
- python - 在字典中使用 eval
- node.js - Firestore 功能,onUpdate 更改其他文件