ReactJS 链接标签 - 未捕获的 ReferenceError：未定义链接

Question

如何正确添加<a> 标签？添加<Link></Link>时出现此错误

Uncaught ReferenceError: Link is not defined

代码：

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

整个代码：

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 }

有什么想法吗？

Answer 1

如果您正在考虑 React 路由器 Link。然后你需要导入它。

import { Link } from 'react-router';

或

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

否则渲染一个纯 <a> 就可以了！

Answer 2

另一种选择是

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

Answer 3

如果你使用 Nextjs，你也可以使用来自 next/link 的链接

import Link from "next/link"