使用React - Boilerplate (react-boilerplate)中的react样板，我如何向主页添加NavBar？

Question

我已经用React编写了一些基本的应用程序，但我对React锅炉板(https://github.com/react-boilerplate/react-boilerplate)还是相当陌生的。我正在深入研究创建一个应用程序，在这个应用程序中，我可以简单地从一个页面输入一个字符串，然后在第二个页面上从我的数据库中获取字符串列表……非常简单。样板文件中有太多可移动的部分，很难弄清楚如何在我的主页上添加一个有效的导航组件。

到目前为止，我已经知道container和component文件夹就是我的游乐场。我已经创建了一个简单的About页面，并通过现有的路由器将其链接起来，以显示在/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>的情况下正常工作。有谁能给我指个方向吗？

Answer 1

我认为你应该从'react-router-dom‘导入Link。检查这是否有帮助

Answer 2

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

您需要导入

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

而不是来自'react-router'

为我解决了所有的问题。