0

Navbar という単純なネストされた React コンポーネントをレンダリングしようとしていますが、その中で別のコンポーネント (またはこの場合は Link タグ) を使用すると、コンソールに「Uncaught Error: Cannot find module "../Navbar"」というメッセージが表示されます。Link タグを削除すると、h1 タグが表示され、エラーは発生しません。App コンポーネントで Link タグを使用できるので、プロジェクトで機能するはずです。

私の App.js コードは次のようになります。

import React from 'react';
import Navbar from '../Navbar';
import { RouteHandler, Link } from 'react-router';

export default React.createClass({

  render: function() {
    return (
      <div className='App'>
        <Link to="about">About</Link>
        <Navbar />
        <RouteHandler />
      </div>
    );
  }

});

私の Navbar.js コードは次のようになります。

import React from 'react';
import { PureRenderMixin } from 'react/addons';
import { Link } from 'react-router';

export default React.createClass({
  mixins: [PureRenderMixin],

  render: function () {
    return (
      <h1>Navbar</h1>
      <Link to="about">About</Link>
    );
  }
});

React-Router、Webpack、および Browser-Sync を使用していますが、ネストされたコンポーネント以外に、ルーティング、ビルド、および同期が正常に機能しているようです。

4

1 に答える 1

0

の render メソッドは、と のNavbar2 つの値を一度に返そうとし<h1>てい<Link>ます。これは構文エラーです。それらを単一の要素、たとえば a でラップする必要があります<div>。

http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.htmlも参照してください。

于 2015-03-15T08:52:10.560 に答える