Когда я использую атрибут `hreflang в ссылке, я получаю предупреждение

Question

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <Link
          hreflang={"en"}
          to={
            "https://www.youtube.com/watch?v=mmCnQDUSO4I&list=RDmmCnQDUSO4I&start_radio=1"
          }
        >
          {"Dmitri Shostakovich"}
        </Link>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Я новичок в реакции и реакции-роутер.В консоли я получаю это предупреждение.

Предупреждение: недопустимое свойство DOM hreflang.Вы имели в виду hrefLang.

Во-вторых, у меня не работает ссылка.

Answer 1

Это связано с тем, что в jsx атрибуты html находятся в camelCase. Чтобы узнать больше read .change атрибута hreflang для hrefLang. <Link/> является привязкой к маршрутизатору, если вы хотите создать ссылку на внешний сайт. используйте <a/>.

import React from "react";
import ReactDOM from "react-dom";

import { BrowserRouter as Router } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Router>
        <a
          hrefLang={"en"}
          href={
            "https://www.youtube.com/watch?v=mmCnQDUSO4I&list=RDmmCnQDUSO4I&start_radio=1"
          }
        >
          {"Dmitri Shostakovich"}
        </a>
      </Router>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

Реакция работы на pascalCase. Хорошо использовать Link, когда вы работаете с внутренней навигацией. когда вы нацеливаете внешнюю ссылку, вы должны использовать якорный тег, т.е. <a>, также добавьте target="_blank" для улучшения.

Просто измени,

<Link
      hreflang={"en"}
      to={
        "https://www.youtube.com/watch?v=mmCnQDUSO4I&list=RDmmCnQDUSO4I&start_radio=1"
      }
    >
      {"Dmitri Shostakovich"}
    </Link>

до

<a
      target="_blank"
      hrefLang={'en'}
      href={
        'https://www.youtube.com/watch?v=mmCnQDUSO4I&list=RDmmCnQDUSO4I&start_radio=1'
      }
    >
      {'Dmitri Shostakovich'}
    </a>

Демо