CODEWITHSUNDEEP
reactjsreact-router
user11700058
user11700058

Reputation:

When I use the `hreflang attribute in Link I get warning

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);

I'm new to react and react-router. In the console I get this Warning.

Warning: Invalid DOM property hreflang. Did you mean hrefLang.

Secondly, the link does not work for me.

Upvotes: 0

Views: 3236

Answers (2)

ravibagul91
ravibagul91

Reputation: 20765

React work on pascalCase. It is good to use Link when you are working with internal navigation. when you are targetting external link you should go with anchor tag i.e <a>, also add target="_blank" for betterment.

Just change,

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

to 

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

Demo

Upvotes: 1

Edgar
Edgar

Reputation: 6858

This is because in jsx html attributes are in camelCase.To learn more read.change hreflang attribute to hrefLang.<Link/> is a router-aware anchor, if you want to link to an external site, use an <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);

Upvotes: 1

Related Questions