如何使用 React 创建指向导航栏的超链接？答案

【问题标题】：How do I create a hyperlink to my nav bar with React?如何使用 React 创建指向导航栏的超链接？
【发布时间】：2019-07-25 12:59:42
【问题描述】：

import React, { Component } from 'react';


class About extends Component {
  render() {
    return(
      <div><h1>About Page</h1></div>
    )
  }
}

export default About;

我被困了一个小时，试图弄清楚如何创建一个类似于 href 但具有反应的超链接。这是一个新的 .js 文件，我想创建一个指向它的外部链接，因此当我单击 Nav Bar 时，它不会将我定向到空白页面，而是将我定向到我的 Twitter 或其他东西。谢谢！

【问题讨论】：

标签： javascript reactjs hyperlink href

【解决方案1】：

你可以这样做

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

class About extends React.Component {
    render() {
        return (
            <div>
                <p>Click here to know about us.</p>
                <ul>
                    <li><Link to="/about">About Us</Link></li>
                </ul>
            </div>
        );
    }
}

export default About;

【讨论】：

./src/components/aboutme.js 尝试导入错误：“链接”未从“react-router”导出。

【解决方案2】：

你可以使用 react-router。 https://reacttraining.com/react-router/web/example/custom-link 当您包裹在路由器中时，它有一个链接元素，您应该能够更改路由.. 希望对你有帮助

【讨论】：

这是一个方便的工具，我将学习它，但我只想在今晚睡觉前能看到我的 h1 并链接到我的导航栏。这太令人沮丧了，我不确定自己做错了什么。

【解决方案3】：

试试这个

import React, { Component } from 'react';
import { Link } from 'react-router';


class About extends Component {
  render() {
    return(
      <div><h1>About Page</h1>
     <Link to="url" activeClassName="active">"Link Name"</Link>
      </div>
    );
  }
}

export default About;

更多解释请访问here

【讨论】：

我试过了，但遇到了错误。我不确定我做错了什么，除了导航栏出现在网页中之外，什么都没有，这很奇怪。甚至没有显示 H1
你检查了进口。我只是错过了它
我应该在不存在的导入中添加什么？
@hennyrose 我修改了我的答案
我应该从 react-router 导出 'LINK' 吗？这就是不断出现的错误

【解决方案4】：

Link 是 react-router-dom 的一个组件，而不是 react-router。尝试按如下方式更改您的导入：

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

class About extends React.Component {
    render() {
        return (
            <div>
                <p>Click here to know about us.</p>
                <ul>
                    <li><Link to="/about">About Us</Link></li>
                </ul>
            </div>
        );
    }
}

export default About;

【讨论】：