teelou teelou - 1 month ago 20
React JSX Question

ReactJS Link tag - Uncaught ReferenceError: Link is not defined

How do I add

<a>
tag correctly? I get this error for adding
<Link></Link>


Uncaught ReferenceError: Link is not defined


The code:

render() {
return (
<div>
<Link className="button-close-overlay"><span className="glyphicon glyphicon-remove"></span></Link>
<article>
<div className="container">
<div className="content align-center" dangerouslySetInnerHTML={{__html: this.state.article.content}}></div>
</div>
</article>
</div>
);
}


The entire code:

class Article extends React.Component
{
constructor(props) {
super(props);
this.state = {
article: [],
};
}

// Then fetch the data using $.get():
componentDidMount() {
this.serverRequest = $.get(this.props.source, function (result) {
this.setState({
article: result
});
}.bind(this));
}

componentWillUnmount() {
this.serverRequest.abort();
}

render() {
return (
<div>
<link className="button-close-overlay"><span className="glyphicon glyphicon-remove"></span></link>
<article>
<div className="container">
<div className="content align-center" dangerouslySetInnerHTML={{__html: this.state.article.content}}></div>
</div>
</article>
</div>
);
}
}

export { Article as default }


Any ideas?

Answer

If you're thinking of the React router Link. Then you need to import it.

import { Link } from 'react-router';

or

var Link = require('react-router').Link

otherwise rendering a pure <a> does the trick!