使用来自 (react-boilerplate) 的 React Boilerplate，我如何将 NavBar 添加到我的主页？答案

【问题标题】：Using React Boilerplate from (react-boilerplate), how co I add a NavBar to my home page?使用来自 (react-boilerplate) 的 React Boilerplate，我如何将 NavBar 添加到我的主页？
【发布时间】：2018-02-15 00:02:21
【问题描述】：

我已经用 React 编写了一些基本的应用程序，但我对 React Boiler-Plate (https://github.com/react-boilerplate/react-boilerplate) 还很陌生。我正在深入研究创建一个应用程序，我可以在其中简单地从一个页面输入一个字符串，并在第二个页面上从我的数据库中获取字符串列表......超级简单。样板中有太多移动部件，很难弄清楚如何将工作导航组件添加到我的主页。

到目前为止，我已经发现 container 和 component 文件夹是我的游乐场所在的位置。我创建了一个简单的“关于”页面，并通过现有路由器将其链接起来以显示在/about。现在我想在我的主页上添加一个导航栏以访问该/about 页面。我相信我知道如何创建一个组件并将其显示在我想要的位置。到目前为止，我的 Nav 组件正在我的 HomePage 组件中呈现，如下所示：

import React from 'react';
import Nav from '../Nav/index';

export default class HomePage extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render(){
    return(
      <div>
        <h1> Welcome to the String Motel where string come to stay... forever</h1>
        <Nav/>
      </div>
      
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

当我像这样向我的导航组件添加链接时：

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

export default class Nav extends React.Component { // eslint-disable-line react/prefer-stateless-function
  render() {
    return (
      <div>
        <h2>Nav Component</h2>
        <IndexLink to='/'>Insert String</IndexLink>
        <Link to='/museum'>Museum</Link>
        <Link to='/about'>About</Link>
      </div>
    );
  }
}

我收到一个错误，我不确定我是否理解：

warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Nav`.
    in Nav (created by HomePage)
    in div (created by HomePage)
    in HomePage (created by LoadableComponent)
    in LoadableComponent (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in div (created by App)
    in App
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in IntlProvider (created by LanguageProvider)
    in LanguageProvider (created by Connect(LanguageProvider))
    in Connect(LanguageProvider)
    in Provider

导出很好，因为它似乎在没有添加<Link> 的情况下运行。谁能指出我正确的方向？

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

我认为你应该从“react-router-dom”导入链接。检查是否有帮助

【讨论】：

我忘记在我的问题中添加该步骤。我试过了，结果还是一样。

【解决方案2】：

我遇到了同样的问题，所以在这里添加我的解决方案以防其他人这样做：

你需要导入

import {Link, IndexLink} from 'react-router-dom'

而不是从 'react-router'

这为我解决了一切问题。

【讨论】：