首页 > 解决方案 > 为什么我不能重定向到我在这个反应代码中提到的网络链接(在这种情况下是 ''twitter.com/explore'')?

问题描述

编码:

import React from "react";
import "./App.css";
import "./Square.css";
import { thestack } from "./thestack";
import { Link, Router, NavLink } from "react-router-dom";
//import { Link } from 'react-router';

function Square(props) {
  return (
    <div className="Square">
      <p>
        <NavLink to={"https://twitter.com/explore"}>
          {props.username} <br />
        </NavLink>
        {props.sitcoms_one} <br />
        {props.sitcoms_two} <br />
        {props.sitcoms_three} <br />
        {props.sitcoms_four} <br />
        {props.sitcoms_five}
      </p>
    </div>
  );
}

export default Square;

它确实在我的项目的 URL 中显示了这一点-> http://localhost:3000/https://twitter.com/explore 但是单击该元素我无法转到我提供的所需网络链接

标签: reactjsreact-routerreact-router-dom

解决方案


您不能使用 NavLink / 链接到外部 url,它仅用于应用程序路径。

您需要使用普通a标签:

<a href="https://twitter.com/explore">{props.username}</a>

推荐阅读