Reputation:
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 meanhrefLang
.
Secondly, the link does not work for me.
Upvotes: 0
Views: 3236
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>
Upvotes: 1
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