Question

我已经在React中编写了一些基本的应用程序，但我对React Boiler-Plate（https://github.com/react-boilerplate/react-boilerplate）还是比较陌生的。我正在深入创建一个应用程序，我只需从一个页面输入一个字符串，然后在第二页上从我的数据库中获取字符串列表......超级简单。在样板上有很多移动部件，很难弄清楚如何将一个有效的导航组件添加到我的主页面。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当我添加链接到我的导航组件时，如下所示：

＆＃13;

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

＆＃13;

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

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

我认为您应该从＆＃39; react-router-dom＆＃39;导入链接。检查是否有帮助

Answer 2

我遇到了同样的问题，因此在其他任何人都这样做的情况下在此处添加我的解决方案：

您需要导入

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

而不是来自 'react-router'

这为我解决了所有问题。

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

2 个答案: