ReactJS Link tag - Uncaught ReferenceError: Link is not defined

Question

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?

Led

Answer 1

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!

Bedad

Aww I see! will fallback to <a> which is better! thanks! :-) – Led

@HenrikAndersson This import from react-router does not work in react-router 4+, you must import from react-router-dom instead – Fare

Answer 2

another option would be

import {Link} from 'react-router-dom';

Societal

Answer 3

If you use Nextjs, you can also use Link from next/link

import Link from "next/link"

Herr

This just work. github.com/zeit/next-learn-demo/blob/master/… – Tutu

Answer 4

Sometimes this error shows up when you are not importing React in the same page, try doing so at the top of the file:

import { Link } from "react-router-dom";
import React from "react";

Bookman