我可以在 reactjs 中使用 href 标签吗？答案

【问题标题】：Can I use href tag in reactjs?我可以在 reactjs 中使用 href 标签吗？
【发布时间】：2018-08-02 03:23:55
【问题描述】：

我想在 reactjs 中重定向一个页面，为此我想使用 href 标签，我可以这样做吗？

下面是代码供参考：

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

// import DoctorImg from './doctor.jpg';

class App extends Component {
  render() {
    return (
<Router>
  <Link to = 'https://google.com/'><button>GO GOOGLE</button></Link>

</Router>
    );
  }
}

export default App;

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以使用 React 中可用的 Link 标签，在内部每个 Link 标签都被转换为一个锚标签

import { Link } from 'react-router-dom';


<Link to="/Path" > Contact us </Link>

【讨论】：

使用 react-router-dom 中的链接需要路由器上下文，这对于简单链接来说要复杂得多。可以简单地使用常规 url'}>

【解决方案2】：

如果你想要一个简单的链接，你可以使用一个简单的href：

<a href={'http://google.com'}>Google</a>

【讨论】：

实际上它对我来说效果很好，我不知道为什么不赞成。比强制采用 react 路由器要简单。

【解决方案3】：

如果你想链接到你的 React 应用程序之外的网页，HTML 锚标记会很好用：

<a href="https://google.com" target="_blank" rel="noopener noreferrer">Click here</a>

target="_blank" 将在新标签页中打开网页。 rel="noopener noreferrer" 防止安全风险，更多细节here

如果你想链接到你的 React 应用程序中的页面，你可能不想使用标签，因为这会导致你的整个应用程序重新加载，丢失应用程序的当前状态并导致用户的延迟。

在这种情况下，您可能希望使用像 react-router 这样的包，它可以在您的应用中移动用户而无需重新加载它。请参阅 Rijul 对该解决方案的回答。

【讨论】：

【解决方案4】：

//or if you want to use or own 
//import {yourcomponent} from'your dir'
import { Link } from 'react-router-dom';


<Link to="/Path" exact component={yourCompponent} > Contact us </Link>

<!-- if u want to use html -->
<a href ="https://google.com/">clik here </a>

【讨论】：

文档中有一个例子：v5.reactrouter.com/web/api/Link

【解决方案5】：

不，你不应该这样做。 href 将刷新当前页面并打开一个新页面。从技术上讲，href 将刷新并推送历史 obj 中的一条路线。在反应中，我真的建议您使用 react-router 进行路由

import { Link } from 'react-router-dom';

<Link to = 'https://google.com/'><button>GO GOOGLE</button></Link>

在 react 路由器中这样做

【讨论】：

我需要在您建议的代码之后使用 switch 标签吗？因为当我按下按钮时，它不会将我重定向到谷歌网站！
你是在用 react router 做路由吗？
是的，react-router-dom
请检查上面的帖子我粘贴代码供您参考@sundar
想想问题和提供的代码——他们想要制作的按钮转到https://google.com——显然这会刷新页面，我怀疑他们的网站是谷歌，所以 react-router- dom 对于这么简单的事情来说太过分了......

【解决方案6】：

<Link to={{ pathname: "https://twitter.com/Turkcell" }} 
target="_blank"><i className="icon icon-twitter"/>
</Link>

你可以使用兄弟。

【讨论】：

twitter.com/Turkcell" }} target="_blank" >