使用React Boilerplate（react-boilerplate），如何将NavBar添加到我的主页？

Question

我在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>功能。谁能指出我正确的方向？

Answer 1

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

Answer 2

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

你需要导入

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

而不是来自'react-router'

那为我修好了一切。